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 github.com/atom/electron/blob/v0.30.6/docs/tutorial/… — jacobq
– jacobq, Commented Mar 9, 2016 at 22:26

Tobias Timm · Accepted Answer · 2015-12-23 10:21:07Z

5

Solved it

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

answered Dec 23, 2015 at 10:21

Tobias Timm

2,11017 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

daveoncode Over a year ago

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)

Hum4n01d Over a year ago

This doesn’t work for me. Still getting Uncaught Error: Cannot find module "electron"

Aaron Shappell · Accepted Answer · 2017-07-29 18:07:12Z

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, 2017 at 18:07

Aaron Shappell

1437 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:10:34Z

-2

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

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered May 8, 2017 at 21:07

mm_

1,7352 gold badges20 silver badges42 bronze badges

Collectives™ on Stack Overflow

Webpack cannot find module 'electron'

3 Answers 3

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Linked

Related