Webpack and electron

[bellostom]

Hi,

I have been developing an electron application, but been using a lot the browser during development.
I have 2 webpack configs, one for electron (with the appropriate target) and a second one for the web build.

The problem I came across is that when I import any electron modules, the web build fails with an error

ERROR in ./~/electron/index.js
Module not found: Error: Cannot resolve module 'fs'

I know it is electron related, because when I comment out the import everything works
I tried wrapping the imports in a if statement checking an environment variable, but this did not work either

Anyway, to make this work?

Regards

[sokra]

You can't use fs in the web. If you building for the electron renderer use the electron renderer target.

[bellostom]

Hi
I am not using fs in the web. Electron must be, but since webpack sees an electron import it tries to load/include? the module, causing the error
As I said, I have 2 configs. The electron one does use the electron renderer

My question is how can I maintain the same codebase, even with conditional imports, without the web build failing

Thanks

[iamstarkov]

@bellostom can you show us you configs? or even electon/web app?

[bellostom]

Hi there

Below are the 2 configs
Let me mention that in the mean time, I found a workaround by using the DefinePlugin and setting an environment variable, which I found out that it actually removes any code wrapped in an if statement and evaluates to false, at build time.
Not ideal, but does the job right now
However, if you believe there is a more straight forward solution, I would be glad to hear it
Regards

WEB config

`
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const output = ('dist');

module.exports = {
context: __dirname,
devtool: 'source-map',
entry: {
main: './app/main.js',
vendor: ['react', 'react-dom']
},
watchOptions: {
poll: 2000
},
output: {
// path: './dist',
path: path.join(__dirname, 'dist'),
filename: '/[name]-bundle.js',
},
resolve: {
extensions: ['', '.scss', '.js', '.json'],
packageMains: ['browser', 'web', 'browserify', 'main', 'style'],
modulesDirectories: [
'node_modules',
path.resolve(__dirname, './node_modules'),
],
root: [
path.resolve('./app'),
],
},
module: {
loaders: [
{
test: /.(js)$/,
exclude: /(node_modules)/,
loader: 'babel',
query: {
presets: ['es2015', 'stage-0', 'stage-1', 'react'],
plugins: ['transform-decorators-legacy', 'transform-class-properties']
}
},
{
test: /.(scss)$/,
loader: ExtractTextPlugin.extract('style', 'css!resolve-url?sourceMap!postcss!sass')
},
{
test: /.(eot|svg|ttf|woff|woff2)$/,
loader: 'file?name=fonts/[name].[ext]'
},
{
test: /.(png)$/,
loader: 'url-loader?limit=8192&name=/images/[name].[ext]'
}
]
},
postcss: [autoprefixer],
sassLoader: {
includePaths: [
'./node_modules',
]
},

devServer: {
port: 8089,
contentBase: path.join(__dirname, 'dist'),
outputPath: path.join(__dirname, 'dist')
},
plugins: [
new ExtractTextPlugin('/[name].css', { allChunks: false }),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new HtmlWebpackPlugin({
template: __dirname + '/dist/tpl/index.tpl.html',
filename: 'index.html',
inject: 'body'
}),
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify('development'),
'CHANNEL': JSON.stringify('web')
}
})
]
};
`

ELECTRON CONFIG

`
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpackTargetElectronRenderer = require('webpack-target-electron-renderer');

const output = ('Public/');

let options = {
context: __dirname,
devtool: 'source-map',
entry: {
main: './app/main.js',
vendor: ['react', 'react-dom']
},
output: {
path: path.join(__dirname, output),
filename: 'static/build/js/[name]-bundle.js',
},
resolve: {
extensions: ['', '.scss', '.js', '.json'],
packageMains: ['browser', 'web', 'browserify', 'main', 'style'],
modulesDirectories: [
'node_modules',
path.resolve(__dirname, './node_modules'),
],
root: [
path.resolve(__dirname, 'app'),
],
},
module: {
loaders: [
{
test: /.js$/,
exclude: /(node_modules)/,
loader: 'babel',
query: {
presets: ['es2015', 'stage-0', 'stage-1', 'react'],
plugins: ['transform-decorators-legacy', 'transform-class-properties']
}
},
{
test: /.scss$/,
loader: ExtractTextPlugin.extract('style', 'css!resolve-url?sourceMap!postcss!sass')
},
{
test: /.svg$/,
loader: 'url?limit=65000&mimetype=image/svg+xml&name=static/build/fonts/[name].[ext]'
},
{
test: /.woff$/,
loader: 'url?limit=65000&mimetype=application/font-woff&name=static/build/fonts/[name].[ext]'
},
{
test: /.woff2$/,
loader: 'url?limit=65000&mimetype=application/font-woff2&name=static/build/fonts/[name].[ext]'
},
{
test: /.[ot]tf$/,
loader: 'url?limit=65000&mimetype=application/octet-stream&name=static/build/fonts/[name].[ext]'
},
{
test: /.eot$/,
loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=static/build/fonts/[name].[ext]'
},
{
test: /.(png|jpg)$/,
loader: 'url?limit=8192&name=static/build/images/[name].[ext]'
},
{
test: /.json$/,
loader: 'json'
}
]
},
postcss: [autoprefixer],
sassLoader: {
includePaths: [
'./node_modules',
]
},

plugins: [
    new ExtractTextPlugin('static/build/css/[name].css', { allChunks: false }),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({
        template: __dirname + '/dist/tpl/index.tpl.html',
        filename: 'index.html',
        inject: 'body'
    }),
    new webpack.DefinePlugin({
        'process.env':{
            'NODE_ENV': JSON.stringify('development'),
            'CHANNEL': JSON.stringify('electron'),
        }
    })
]

};
options.target = webpackTargetElectronRenderer(options);
module.exports = options;
`

[bebraw]

I'm closing this since you found a workaround. Please try Stack Overflow for more ideas.