Tobias Timm Tobias Timm - 6 months ago 60
TypeScript Question

Webpack cannot find module 'electron'

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'.

Answer Source

Solved it

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