Webpack cannot find module 'electron'

Question

I am trying to develop a little electron angular2 application based on this tutorial

It seems their is some error with the bundling of webpack, because i cant require/import the electron remote in my renderer component.

in my AppComponent I do the following

import {remote} from 'electron';

My Webpack Config

var path = require('path');
var webpack = require('webpack');
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
var webpackTargetElectronRenderer = require('webpack-target-electron-renderer');

var config = {
  debug: true,

  devtool: 'source-map',

  entry: {
    'angular2': [
    'rxjs',
    'reflect-metadata',
    'angular2/core',
    'angular2/router',
    'angular2/http'
  ],
  'app': './src/app/renderer/bootstrap'
},

  output: {
    path: __dirname + '/build/',
    publicPath: 'build/',
    filename: '[name].js',
    sourceMapFilename: '[name].js.map',
    chunkFilename: '[id].chunk.js'
  },

  resolve: {
    extensions: ['','.ts','.js','.json', '.css', '.html'],
    packageMains: ['webpack', 'browser', 'web', 'browserify', ['jam', 'main'], 'main']
  },

  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'ts',
        exclude: [ /node_modules/ ]
      }
    ]
  },

  plugins: [
    new CommonsChunkPlugin({ name: 'angular2', filename: 'angular2.js', minChunks: Infinity }),
    new CommonsChunkPlugin({ name: 'common',   filename: 'common.js' })
  ]
};

config.target = webpackTargetElectronRenderer(config);
module.exports = config;

Webpack throws the following error

ERROR in ./src/app/renderer/components/app/app.ts
(1,22): error TS2307: Cannot find module 'electron'.

Just wanted to mention that this error can also happen when one switches back to using an older version of electron (e.g. v0.30.6 for support for serialport-electron) when they were still using `var app = require('app');` etc. instead of `const electron = require('electron');` -- see https://github.com/atom/electron/blob/v0.30.6/docs/tutorial/quick-start.md — jacobq, Mar 09 '16 at 22:26

score 5 · Accepted Answer · answered Dec 23 '15 at 10:21

5

Solved it

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

answered Dec 23 '15 at 10:21

Tobias Timm

1,855
15
27

1

I doesn't work for me... I get `syntax error near unexpected token (` `var electron = require('./')` ...any idea? (I'm using angular2 with the latest CLI based on webpack) – daveoncode Oct 25 '16 at 08:48
This doesn’t work for me. Still getting `Uncaught Error: Cannot find module "electron"` – Hum4n01d Jul 14 '17 at 19:07

score 0 · Answer 2 · answered Jul 29 '17 at 18:07

0

Try adding target: "electron-renderer" to the bottom of the module.exports object in your webpack config. (mine was created via ng eject via the Angular CLI)

answered Jul 29 '17 at 18:07

Aaron Shappell

133
7

score -2 · Answer 3 · edited May 23 '17 at 12:10

Are you new to TypeScript? Did you installed it? You can install it by:

npm install -g typescript

Your solutions is a java script solutions, which is an ok hack if that's what you are looking for, but if you want to use TypeScript, then you should be able to make it work using 'import'.

Do the tutorial in: https://www.npmjs.com/package/typescript

Also, check: TS2307: Cannot find module 'angular2/core' while importing Angular2 on TypeScript

Webpack cannot find module 'electron'

3 Answers3

Linked