You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm having problems loading native modules on an Electron app built with Webpack. The error is this:
It's trying to load "robotjs.node" from the path "/Users/RUBI35900/..etc, which is from the computer I package the app (RUBI35900 is my development machine). And this error throws on a different machine. So it seems that webpack stores the full path instead of using a relative one, so it only works on the machine that was used for packaging the app.
Here is my webpack config:
Base:
/**
* Base webpack config used across other specific configs
*/
import path from 'path';
import webpack from 'webpack';
import { dependencies as externals } from './app/package.json';
export default {
externals: Object.keys(externals || {}),
module: {
rules: [{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
},
{
test: /\.node$/,
use: 'node-loader'
}]
},
output: {
path: path.join(__dirname, 'app'),
filename: 'bundle.js',
// https://github.com/webpack/webpack/issues/1114
libraryTarget: 'commonjs2'
},
/**
* Determine the array of extensions that should be used to resolve modules.
*/
resolve: {
extensions: ['.js', '.jsx', '.json'],
modules: [
path.join(__dirname, 'app'),
'node_modules',
],
},
plugins: [
new webpack.NamedModulesPlugin(),
],
};
Main process:
/**
* Webpack config for production electron main process
*/
import webpack from 'webpack';
import merge from 'webpack-merge';
import BabiliPlugin from 'babili-webpack-plugin';
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
import baseConfig from './webpack.config.base';
export default merge.smart(baseConfig, {
devtool: 'source-map',
target: 'electron-main',
entry: ['babel-polyfill', './app/main.dev'],
// 'main.js' in root
output: {
path: __dirname,
filename: './app/main.prod.js'
},
plugins: [
/**
* Babli is an ES6+ aware minifier based on the Babel toolchain (beta)
*/
new BabiliPlugin(),
new BundleAnalyzerPlugin({
analyzerMode: process.env.OPEN_ANALYZER === 'true' ? 'server' : 'disabled',
openAnalyzer: process.env.OPEN_ANALYZER === 'true'
}),
/**
* Create global constants which can be configured at compile time.
*
* Useful for allowing different behaviour between development builds and
* release builds
*
* NODE_ENV should be production so that modules do not perform certain
* development checks
*/
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production'),
'process.env.DEBUG_PROD': JSON.stringify(process.env.DEBUG_PROD || 'false'),
$dirname: '__dirname'
}),
],
/**
* Disables webpack processing of __dirname and __filename.
* If you run the bundle in node.js it falls back to these values of node.js.
* https://github.com/webpack/webpack/issues/2010
*/
node: {
__dirname: false,
__filename: false
},
});
Renderer:
/**
* Build config for electron renderer process
*/
import path from 'path';
import webpack from 'webpack';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
import merge from 'webpack-merge';
import BabiliPlugin from 'babili-webpack-plugin';
import baseConfig from './webpack.config.base';
export default merge.smart(baseConfig, {
devtool: 'source-map',
target: 'electron-renderer',
entry: ['babel-polyfill', './app/index'],
output: {
path: path.join(__dirname, 'app/dist'),
publicPath: '../dist/'
},
module: {
rules: [
// Extract all .global.css to style.css as is
{
test: /\.global\.css$/,
use: ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'style-loader',
})
},
// Pipe other styles through css modules and append to style.css
{
test: /^((?!\.global).)*\.css$/,
use: ExtractTextPlugin.extract({
use: {
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[name]__[local]__[hash:base64:5]',
}
}
}),
},
// Add SASS support - compile all .global.scss files and pipe it to style.css
{
test: /\.global\.scss$/,
use: ExtractTextPlugin.extract({
use: [
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
],
fallback: 'style-loader',
})
},
// Add SASS support - compile all other .scss files and pipe it to style.css
{
test: /^((?!\.global).)*\.scss$/,
use: ExtractTextPlugin.extract({
use: [{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[name]__[local]__[hash:base64:5]',
}
},
{
loader: 'sass-loader'
}]
}),
},
// WOFF Font
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/font-woff',
}
},
},
// WOFF2 Font
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/font-woff',
}
}
},
// TTF Font
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/octet-stream'
}
}
},
// EOT Font
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: 'file-loader',
},
// SVG Font
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'image/svg+xml',
}
}
},
// Common Image Formats
{
test: /\.(?:ico|gif|png|jpg|jpeg|webp)$/,
use: 'url-loader',
}
]
},
plugins: [
/**
* Create global constants which can be configured at compile time.
*
* Useful for allowing different behaviour between development builds and
* release builds
*
* NODE_ENV should be production so that modules do not perform certain
* development checks
*/
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
}),
/**
* Babli is an ES6+ aware minifier based on the Babel toolchain (beta)
*/
new BabiliPlugin(),
new ExtractTextPlugin('style.css'),
new BundleAnalyzerPlugin({
analyzerMode: process.env.OPEN_ANALYZER === 'true' ? 'server' : 'disabled',
openAnalyzer: process.env.OPEN_ANALYZER === 'true'
}),
],
});
I'm having problems loading native modules on an Electron app built with Webpack. The error is this:
It's trying to load "robotjs.node" from the path "/Users/RUBI35900/..etc, which is from the computer I package the app (RUBI35900 is my development machine). And this error throws on a different machine. So it seems that webpack stores the full path instead of using a relative one, so it only works on the machine that was used for packaging the app.
Here is my webpack config:
Base:
Main process:
Renderer:
I created a repository to reproduce the issue:
https://github.com/pancho111203/electron-react-boilerplate
To reproduce:
The error should appear
The text was updated successfully, but these errors were encountered: