5

I am using React + Electron + Webpack to create an application, but while trying to use Electron modules, i am getting the error stating "Cannot find module 'electron'.

I have the below sample code in one of my React components :-

const shell = window.require("electron").shell;
shell.showItemInFolder("C:\\Logs");

I have referred many of the issues which were raised in SO related to webpack & Electron, but none of the solutions seem to work for me.

When i try the below code :-

require('electron-prebuilt')

It returns me back the path to the electron executable.

Ranjith Nair
  • 475
  • 1
  • 6
  • 17
  • 1
    This might help http://stackoverflow.com/questions/34427446/bundle-error-using-webpack-for-electron-application-cannot-resolve-module-elec – Michael Radionov Jun 19 '16 at 20:49

2 Answers2

0

There is a target option in webpack's configuration, you need to set it to electron. Like this:

var config = {
    target: 'electron',
    entry: __dirname + '/main.js',
    output: {
        path: __dirname + '/dist/',
        filename: 'bundle.js'
    },
    ...
};

module.exports = config;
Gokhan Sari
  • 7,185
  • 5
  • 34
  • 32
0

In webpack, you can set the development targets. By default, the target will be set to web. So you need to set the target as electron-renderer in the renderer processes and electron-main in the main process.

//In the renderer configuration
module.exports = {
 target: 'electron-renderer',
 //... other configurations
}

//In the main configuration
module.exports = {
 target: 'electron-main',
 //... other configurations
}

electron and atom are alias for electron-main

Sanoop Jose
  • 74
  • 3