webpack - Electron și TypeScript: 'fs' nu poate fi rezolvat

Încerc să creez prima mea aplicație Electron. Am decis să folosesc următoarele unelte/tehnologii:

TypeScript
WebPack (versiunea 3)
Reacționează

Mediul local este OS X High Sierra.

Problema este că nici măcar nu pot să îmi construiesc aplicația și primesc eroare la construirea cu WebPack: "Module not found: Error: Can't resolve 'fs' in '/node_modules/electron' "

Am configurația dată mai jos: package.json:

  "dependencies": {
    "electron": "^1.7.11"
  },
  "devDependencies": {
    "ts-loader": "^3.3.1",
    "tslint": "^5.9.1",
    "typescript": "^2.6.2",
    "webpack": "^3.10.0"
  }

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "outDir": "./dist/",
    "sourceMap": true,
    "target": "es2015"
  }
}

webpack.config.js:

const path = require('path');

module.exports = {
    entry: './src/index.ts',
    devtool: 'inline-source-map',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    // node: {
    //     'fs': 'empty'
    // },
    resolve: {
        extensions: [ '.tsx', '.ts', '.js' ]
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

În sfârșit, singurul meu fișier sursă de cod (./src/index.ts) preluat din tutorialul Electron arată astfel:

import { app, BrowserWindow } from 'electron';
import * as path from 'path';
import * as url from 'url';

let win: Electron.BrowserWindow;

function createWindow () {
    // ... common stuff
}

app.on('ready', createWindow);
app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); }});
app.on('activate', () => { if (win === null) { createWindow(); }});

Presupun că problema este în modul de utilizare al TypeScript pentru că dacă pun un astfel de cod din index.ts într-un fișier js simplu, funcționează corect (înlocuind 'import' cu 'require').

Mulțumesc anticipat pentru orice ajutor!

Actualizare

Dacă setez { target: 'node', } în webpack.config.js, atunci nu apare nicio eroare în timpul procesului de construire, dar dacă încerc să deschid aplicația, primesc:

App threw an error during load
Error: Electron failed to install correctly, please delete node_modules/electron and try installing again

Reinstalarea modulelor node nu ajută.

Răspuns #1

Ok, în sfârșit am găsit soluția care a funcționat pentru mine. Opțiunea 'target' ar trebui să fie definită în webpack.config.js. Și nu ar trebui să fie { target: 'node' }, așa cum am încercat înainte

Se pare că Webpack are setări specifice pentru aplicațiile Electron, prin urmare modul corect este să le setați:

{
    // for files that should be compiled for electron main process
    target: 'electron-main'
}

{
    // for files that should be compiled for electron renderer process
    target: 'electron-renderer'
}

Asta e. Trebuie doar să citesc documentația cu atenție :-(

Răspunsul #2

Pentru a adăuga la răspunsul original. Dacă folosești Electron + Next.js, trebuie să specifici target în fișierul next.config.js. Dacă nu ai unul, creează-l la nivelul rădăcină al aplicației tale (unde se află package.json). Adaugă următorul cod:

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.target = "electron-renderer";
    }
    return config;
  },
};