Electron and TypeScript: 'fs' can't be resolved

12
votes

I'm trying to create my first Electron app. I've decided to use following tools/technologies:

  • TypeScript
  • WebPack (version 3)
  • React

Local environment is OS X High Sierra.

The problem is that I can't even build my app and I get error on building with WebPack: "Module not found: Error: Can't resolve 'fs' in '<root>/node_modules/electron' "

I have configuration given below: 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')
    }
};

Finally, my only source code file (./src/index.ts) taken from electron tutorial looks like:

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(); }});

I assume that the problem is in the way of TypeScript usage because if I put such code from index.ts to the plain js file, it works correctly (replacing 'import' with 'require').

Thanks for any help in advance!

Update

If set { target: 'node', } in webpack.config.js then there is no error on building step, but if I try to open app I get: 

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

reinstalling of node modules doesn't help.

3
typescriptwebpackelectron

3 Answers

27
votes

Ok, finally I've found the solution worked for me. The 'target' option should be defined in webpack.config.js. And it shouldn't be { target: 'node' }, as I tried before

As it appears, Webpack has specific target settings for electron apps, therefore the correct way is to set it:

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

or

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

That's it. Just need to read docs carefully :- (

0
votes

I came across this on a search and I'd offer an improve answer for dealing with errors that only happen on certain build targets:

const config = {
    //basic module.exports rules here
}

module.exports = [
    config,
    {
        ...config,
        target: 'web', //target that needs special rules, then all your other special config rules in this object
        node: {
            fs: 'empty'
        }
    }
]
0
votes

To add to the original answer. If you are using Electron + Next.js, you need to specify the target in next.config.js file. If you do not have one, create it on the root level of your app (where package.json is located). Add the following:

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