Bundle error using webpack for Electron application `Cannot resolve module 'electron'`

Question

I am trying to create an Electron application with React. I use Webpack to compile the React JSX syntax, but when I try to compile with webpack command, I got this error:

ERROR in ./app.jsx Module not found: Error: Cannot resolve module 'electron' in /Users/masterT/Downloads/gist

@ ./app.jsx 6:18-37

Here is the application code.

I am doing something wrong?

Just a note, you don't need webpack to use JSX with Electron. Simply use the [Babel require hook](https://babeljs.io/docs/usage/require/) in an early entry point in your app. [My boilerplate](https://github.com/BinaryMuse/react-babel-boilerplate) shows how to do this with Babel version 5 instead of 6. — Michelle Tilley, Dec 23 '15 at 05:05
^ This no longer is a good solution because contextIsolation=true and nodeIntegration=false is preferred. So renderer process doesn't have access to Node.js environment. — vaughan, Nov 10 '21 at 00:08

score 37 · Answer 1 · answered Mar 19 '16 at 17:54

37

A very simple solution :

const remote = window.require('electron').remote;

webpack will ignore this require

answered Mar 19 '16 at 17:54

jnoleau

379
3
4

1

nice one ! I don't need to touch the webpack config and it's perfect for me because my environment could be web or electron – Maxdow May 24 '16 at 14:35
1

why is everyone using complicated webpack configs when this simple solution works? are there any drawback? – Pier Jun 15 '16 at 01:51
It works when developing, but after packaged the electron app it doesn't work anymore, any suggestion? – NamNamNam Apr 20 '20 at 10:25
Won't work with ESM source. The `externals` solution below is better. – vaughan Nov 10 '21 at 00:09

score 29 · Accepted Answer · edited Sep 09 '16 at 02:58

29

Webpack tries to resolve electron module with the installed node_modules. But the electron module is resolved in Electron itself at runtime. So, you have to exclude particular module from webpack bundling like this:

webpack.config.js:

module.exports = {
  entry: './app.jsx',
  output: {
    path: './built',
    filename: 'app.js'
  },
  target: 'atom',
  module: {
    loaders: [
      {
        loader: 'babel',
        test: /\.jsx$/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
  externals: [
    (function () {
      var IGNORES = [
        'electron'
      ];
      return function (context, request, callback) {
        if (IGNORES.indexOf(request) >= 0) {
          return callback(null, "require('" + request + "')");
        }
        return callback();
      };
    })()
  ]
};

edited Sep 09 '16 at 02:58

Dane Balia

5,271
5
32
57

answered Feb 16 '16 at 07:46

minodisk

650
6
18

1

Great answer! Really appreciate! – jvitor83 Oct 13 '16 at 06:36
this is useful, and although it works, it isn't specific to the question unlike Konrad's answer below – sjmeverett Apr 11 '17 at 12:54
Superb!! I was having the error `Can't resolve 'fs' in '.....node_modules\electron'` and adding the excludes fixed it! Thank you! – Noitidart Jul 22 '17 at 21:17

score 24 · Answer 3 · edited Apr 11 '17 at 22:23

24

You can set target: 'electron' in your webpack config and then you don't have to exclude electron in externals.

From webpack documentation:

"electron" Compile for usage in Electron – supports require-ing Electron-specific modules.

edited Apr 11 '17 at 22:23

sjmeverett

1,277
1
11
23

answered Aug 11 '16 at 18:46

Konrad Lalik

596
4
8

This should be the accepted answer: it's the only one that addresses the specific issue. – sjmeverett Apr 11 '17 at 12:51
It seems that this doesn't stop webpack from compiling electron requires into bundle.js. It doesn't throw error - yes - but you will have a broken bundle js with node module copied in it if you'll attempt to require any node-only modules in your jsx's ("path" for ex). At least that what i've experienced using "electron-main" and/or "electron-renderer" targets ("electron" target is depreciated in latest). Seems like using window.require for electron requires works and allows for more control. – Max Yari Feb 27 '18 at 14:12
1

Note that in newer Webpack versions, the correct target name is `electron-main`. – Venryx Dec 06 '18 at 15:50

score 0 · Answer 4 · answered Aug 26 '20 at 10:01

0

Also, webpack.config.js:

const nodeExternals = require('webpack-node-externals')

module.exports = {
    ...
    externals: [ nodeExternals(), 'react', 'electron' ],
    ...
}

answered Aug 26 '20 at 10:01

Emmanuel N K

8,710
1
31
37

score 0 · Answer 5 · answered Apr 03 '22 at 18:35

0

I tried most of the above examples, but none of them seemed to work for me. I then installed Electron using npm and then used yarn build It worked and I got my production build.

npm i electron

answered Apr 03 '22 at 18:35

Brihadeesh R K

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Ghassan Maslamani Apr 03 '22 at 19:15
This does not really answer the question. If you have a different question, you can ask it by clicking [Ask Question](https://stackoverflow.com/questions/ask). To get notified when this question gets new answers, you can [follow this question](https://meta.stackexchange.com/q/345661). Once you have enough [reputation](https://stackoverflow.com/help/whats-reputation), you can also [add a bounty](https://stackoverflow.com/help/privileges/set-bounties) to draw more attention to this question. - [From Review](/review/late-answers/31448155) – alwe Apr 08 '22 at 11:25

score -3 · Answer 6 · answered Dec 23 '15 at 02:33

-3

Your package.json has 'electron-prebuilt' but you require 'electron' in your code. Have you tried require-ing 'electron-prebuild'?

answered Dec 23 '15 at 02:33

Norbert

603
5
10

If you look at the [quick start](http://electron.atom.io/docs/latest/tutorial/quick-start/) in the *Electron* documentation, they `require('electron')`. I think the problem is related to webpack. – MasterT Dec 23 '15 at 03:00
if you perform > "npm ls electron" in your terminal, does it list anything? – Norbert Dec 23 '15 at 03:32
It returns `└── (empty)`. But in my code, **electron** is not a reference to this module https://www.npmjs.com/package/electron, it's a reference to https://github.com/atom/electron. – MasterT Dec 23 '15 at 03:41
I see, so it must be a webpack config; I indeed some rather diferent webpack configuration for `target` going on here: https://github.com/chentsulin/electron-react-boilerplate/blob/master/webpack.config.development.js although `target: 'atom'` is what's in the webpack doc, as you've probably found. It's using https://github.com/chentsulin/webpack-target-electron-renderer to finish configurering webpack it seems. – Norbert Dec 23 '15 at 03:59
Well it worked using the module https://github.com/chentsulin/webpack-target-electron-renderer, but why it didn't work using option `target: 'atom'`? It feels wrong to use a module when there is supposed to be a **built-in** solution in *webpack*. Don't you think? – MasterT Dec 23 '15 at 04:37

Bundle error using webpack for Electron application `Cannot resolve module 'electron'`

6 Answers6

Linked