Electron application cannot resolve any node module that is added to webpack externals
1
I am trying to build an Electron application using Vue.js.
I am using webpack-dev-server to run the electron app in development mode.
In the webpack config I am adding all my node_modules to the externals array since I do not want them to be bundled.
The webpack development server gets started successfully without any error and the application is also launched as expected but I get the following error in the console.
Uncaught Error: Cannot find module 'frappejs'.
Note: This is not the only module that cannot be resolved. All the modules that I have added to the webpack externals arrays could not be resolved.
If I do not add them to the externals array, the node_modules are detected and the above error disappears.
Another thing that I have noticed is that if I replaceconst frappe = require('frappejs'); withconst frappe = require('../../node_modules/frappejs');
The error disappers in this case as well when I am explicitly pointing to the node_modules directory.
What maybe the reason for this behaviour?
config.js
const webpack = require('webpack');
// plugins
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsWebpackPlugin = require('case-sensitive-paths-webpack-plugin');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { getAppConfig, resolveAppDir } = require('./utils');
const appDependencies = require(resolveAppDir('./package.json')).dependencies;
const frappeDependencies = require(resolveAppDir('./node_modules/frappejs/package.json')).dependencies;
// const frappeDependencies = require('../package.json').dependencies;
let getConfig, getElectronMainConfig;
function makeConfig() {
const isProduction = process.env.NODE_ENV === 'production';
process.env.ELECTRON = 'true';
const isElectron = process.env.ELECTRON === 'true';
const isMonoRepo = process.env.MONO_REPO === 'true';
const whiteListedModules = ['vue'];
const allDependencies = Object.assign(frappeDependencies, appDependencies);
const externals = Object.keys(allDependencies).filter(d => !whiteListedModules.includes(d));
getConfig = function getConfig() {
const appConfig = getAppConfig();
const config = {
mode: isProduction ? 'production' : 'development',
context: resolveAppDir(),
entry: isElectron ? appConfig.electron.entry : appConfig.dev.entry,
externals: isElectron ? externals : undefined,
target: isElectron ? 'electron-renderer' : 'web',
output: {
path: isElectron ? resolveAppDir('./dist/electron') : resolveAppDir('./dist'),
filename: '[name].js',
// publicPath: appConfig.dev.assetsPublicPath,
libraryTarget: isElectron ? 'commonjs2' : undefined
},
devtool: !isProduction ? 'cheap-module-eval-source-map' : '',
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader'
},
{
test: /.js$/,
loader: 'babel-loader',
exclude: file => (
/node_modules/.test(file) &&
!/.vue.js/.test(file)
)
},
{
test: /.node$/,
use: 'node-loader'
},
{
test: /.css$/,
use: [
'vue-style-loader',
'css-loader'
]
},
{
test: /.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
},
resolve: {
extensions: ['.js', '.vue', '.json', '.css', '.node'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'deepmerge$': 'deepmerge/dist/umd.js',
'@': appConfig.dev.srcDir ? resolveAppDir(appConfig.dev.srcDir) : null
}
},
plugins: [
new webpack.DefinePlugin(Object.assign({
'process.env': appConfig.dev.env,
'process.env.NODE_ENV': isProduction ? '"production"' : '"development"',
'process.env.ELECTRON': JSON.stringify(process.env.ELECTRON)
}, !isProduction ? {
'__static': `"${resolveAppDir(appConfig.staticPath).replace(/\/g, '\\')}"`
} : {})),
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: resolveAppDir(appConfig.dev.entryHtml),
nodeModules: !isProduction
? isMonoRepo ? resolveAppDir('../../node_modules') : resolveAppDir('./node_modules')
: false
}),
new CaseSensitivePathsWebpackPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new FriendlyErrorsWebpackPlugin({
compilationSuccessInfo: {
messages: [`FrappeJS server started at http://${appConfig.dev.devServerHost}:${appConfig.dev.devServerPort}`],
},
}),
new webpack.ProgressPlugin(),
isProduction ? new CopyWebpackPlugin([
{
from: resolveAppDir(appConfig.staticPath),
to: resolveAppDir('./dist/electron/static'),
ignore: ['.*']
}
]) : null,
// isProduction ? new BabiliWebpackPlugin() : null,
// isProduction ? new webpack.LoaderOptionsPlugin({ minimize: true }) : null,
].filter(Boolean),
optimization: {
noEmitOnErrors: false
},
devServer: {
// contentBase: './dist', // dist path is directly configured in express
hot: true,
quiet: true
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// process is injected via DefinePlugin, although some 3rd party
// libraries may require a mock to work properly (#934)
process: 'mock',
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}
return config;
}
getElectronMainConfig = function getElectronMainConfig() {
const appConfig = getAppConfig();
return {
entry: {
main: resolveAppDir(appConfig.electron.paths.main)
},
externals: externals,
module: {
rules: [
{
test: /.js$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /.node$/,
use: 'node-loader'
}
]
},
node: {
__dirname: !isProduction,
__filename: !isProduction
},
output: {
filename: '[name].js',
libraryTarget: 'commonjs2',
path: resolveAppDir('./dist/electron')
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
// isProduction && new BabiliWebpackPlugin(),
isProduction && new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"'
})
].filter(Boolean),
resolve: {
extensions: ['.js', '.json', '.node']
},
target: 'electron-main'
}
}
}
makeConfig();
module.exports = {
getConfig,
getElectronMainConfig
};Note: the resolveAppDir function returns the cwd path concatenated with the parameter passed.
node.js webpack electron webpack-dev-server
asked Nov 21 '18 at 10:35
anto-christoanto-christo
275
add a comment |
1
I am trying to build an Electron application using Vue.js.
I am using webpack-dev-server to run the electron app in development mode.
In the webpack config I am adding all my node_modules to the externals array since I do not want them to be bundled.
The webpack development server gets started successfully without any error and the application is also launched as expected but I get the following error in the console.
Uncaught Error: Cannot find module 'frappejs'.
Note: This is not the only module that cannot be resolved. All the modules that I have added to the webpack externals arrays could not be resolved.
If I do not add them to the externals array, the node_modules are detected and the above error disappears.
Another thing that I have noticed is that if I replaceconst frappe = require('frappejs'); withconst frappe = require('../../node_modules/frappejs');
The error disappers in this case as well when I am explicitly pointing to the node_modules directory.
What maybe the reason for this behaviour?
config.js
const webpack = require('webpack');
// plugins
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsWebpackPlugin = require('case-sensitive-paths-webpack-plugin');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { getAppConfig, resolveAppDir } = require('./utils');
const appDependencies = require(resolveAppDir('./package.json')).dependencies;
const frappeDependencies = require(resolveAppDir('./node_modules/frappejs/package.json')).dependencies;
// const frappeDependencies = require('../package.json').dependencies;
let getConfig, getElectronMainConfig;
function makeConfig() {
const isProduction = process.env.NODE_ENV === 'production';
process.env.ELECTRON = 'true';
const isElectron = process.env.ELECTRON === 'true';
const isMonoRepo = process.env.MONO_REPO === 'true';
const whiteListedModules = ['vue'];
const allDependencies = Object.assign(frappeDependencies, appDependencies);
const externals = Object.keys(allDependencies).filter(d => !whiteListedModules.includes(d));
getConfig = function getConfig() {
const appConfig = getAppConfig();
const config = {
mode: isProduction ? 'production' : 'development',
context: resolveAppDir(),
entry: isElectron ? appConfig.electron.entry : appConfig.dev.entry,
externals: isElectron ? externals : undefined,
target: isElectron ? 'electron-renderer' : 'web',
output: {
path: isElectron ? resolveAppDir('./dist/electron') : resolveAppDir('./dist'),
filename: '[name].js',
// publicPath: appConfig.dev.assetsPublicPath,
libraryTarget: isElectron ? 'commonjs2' : undefined
},
devtool: !isProduction ? 'cheap-module-eval-source-map' : '',
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader'
},
{
test: /.js$/,
loader: 'babel-loader',
exclude: file => (
/node_modules/.test(file) &&
!/.vue.js/.test(file)
)
},
{
test: /.node$/,
use: 'node-loader'
},
{
test: /.css$/,
use: [
'vue-style-loader',
'css-loader'
]
},
{
test: /.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
},
resolve: {
extensions: ['.js', '.vue', '.json', '.css', '.node'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'deepmerge$': 'deepmerge/dist/umd.js',
'@': appConfig.dev.srcDir ? resolveAppDir(appConfig.dev.srcDir) : null
}
},
plugins: [
new webpack.DefinePlugin(Object.assign({
'process.env': appConfig.dev.env,
'process.env.NODE_ENV': isProduction ? '"production"' : '"development"',
'process.env.ELECTRON': JSON.stringify(process.env.ELECTRON)
}, !isProduction ? {
'__static': `"${resolveAppDir(appConfig.staticPath).replace(/\/g, '\\')}"`
} : {})),
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: resolveAppDir(appConfig.dev.entryHtml),
nodeModules: !isProduction
? isMonoRepo ? resolveAppDir('../../node_modules') : resolveAppDir('./node_modules')
: false
}),
new CaseSensitivePathsWebpackPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new FriendlyErrorsWebpackPlugin({
compilationSuccessInfo: {
messages: [`FrappeJS server started at http://${appConfig.dev.devServerHost}:${appConfig.dev.devServerPort}`],
},
}),
new webpack.ProgressPlugin(),
isProduction ? new CopyWebpackPlugin([
{
from: resolveAppDir(appConfig.staticPath),
to: resolveAppDir('./dist/electron/static'),
ignore: ['.*']
}
]) : null,
// isProduction ? new BabiliWebpackPlugin() : null,
// isProduction ? new webpack.LoaderOptionsPlugin({ minimize: true }) : null,
].filter(Boolean),
optimization: {
noEmitOnErrors: false
},
devServer: {
// contentBase: './dist', // dist path is directly configured in express
hot: true,
quiet: true
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// process is injected via DefinePlugin, although some 3rd party
// libraries may require a mock to work properly (#934)
process: 'mock',
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}
return config;
}
getElectronMainConfig = function getElectronMainConfig() {
const appConfig = getAppConfig();
return {
entry: {
main: resolveAppDir(appConfig.electron.paths.main)
},
externals: externals,
module: {
rules: [
{
test: /.js$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /.node$/,
use: 'node-loader'
}
]
},
node: {
__dirname: !isProduction,
__filename: !isProduction
},
output: {
filename: '[name].js',
libraryTarget: 'commonjs2',
path: resolveAppDir('./dist/electron')
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
// isProduction && new BabiliWebpackPlugin(),
isProduction && new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"'
})
].filter(Boolean),
resolve: {
extensions: ['.js', '.json', '.node']
},
target: 'electron-main'
}
}
}
makeConfig();
module.exports = {
getConfig,
getElectronMainConfig
};Note: the resolveAppDir function returns the cwd path concatenated with the parameter passed.
node.js webpack electron webpack-dev-server
asked Nov 21 '18 at 10:35
anto-christoanto-christo
275
add a comment |
1
1
1
1
I am trying to build an Electron application using Vue.js.
I am using webpack-dev-server to run the electron app in development mode.
In the webpack config I am adding all my node_modules to the externals array since I do not want them to be bundled.
The webpack development server gets started successfully without any error and the application is also launched as expected but I get the following error in the console.
Uncaught Error: Cannot find module 'frappejs'.
Note: This is not the only module that cannot be resolved. All the modules that I have added to the webpack externals arrays could not be resolved.
If I do not add them to the externals array, the node_modules are detected and the above error disappears.
Another thing that I have noticed is that if I replaceconst frappe = require('frappejs'); withconst frappe = require('../../node_modules/frappejs');
The error disappers in this case as well when I am explicitly pointing to the node_modules directory.
What maybe the reason for this behaviour?
config.js
const webpack = require('webpack');
// plugins
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsWebpackPlugin = require('case-sensitive-paths-webpack-plugin');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { getAppConfig, resolveAppDir } = require('./utils');
const appDependencies = require(resolveAppDir('./package.json')).dependencies;
const frappeDependencies = require(resolveAppDir('./node_modules/frappejs/package.json')).dependencies;
// const frappeDependencies = require('../package.json').dependencies;
let getConfig, getElectronMainConfig;
function makeConfig() {
const isProduction = process.env.NODE_ENV === 'production';
process.env.ELECTRON = 'true';
const isElectron = process.env.ELECTRON === 'true';
const isMonoRepo = process.env.MONO_REPO === 'true';
const whiteListedModules = ['vue'];
const allDependencies = Object.assign(frappeDependencies, appDependencies);
const externals = Object.keys(allDependencies).filter(d => !whiteListedModules.includes(d));
getConfig = function getConfig() {
const appConfig = getAppConfig();
const config = {
mode: isProduction ? 'production' : 'development',
context: resolveAppDir(),
entry: isElectron ? appConfig.electron.entry : appConfig.dev.entry,
externals: isElectron ? externals : undefined,
target: isElectron ? 'electron-renderer' : 'web',
output: {
path: isElectron ? resolveAppDir('./dist/electron') : resolveAppDir('./dist'),
filename: '[name].js',
// publicPath: appConfig.dev.assetsPublicPath,
libraryTarget: isElectron ? 'commonjs2' : undefined
},
devtool: !isProduction ? 'cheap-module-eval-source-map' : '',
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader'
},
{
test: /.js$/,
loader: 'babel-loader',
exclude: file => (
/node_modules/.test(file) &&
!/.vue.js/.test(file)
)
},
{
test: /.node$/,
use: 'node-loader'
},
{
test: /.css$/,
use: [
'vue-style-loader',
'css-loader'
]
},
{
test: /.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
},
resolve: {
extensions: ['.js', '.vue', '.json', '.css', '.node'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'deepmerge$': 'deepmerge/dist/umd.js',
'@': appConfig.dev.srcDir ? resolveAppDir(appConfig.dev.srcDir) : null
}
},
plugins: [
new webpack.DefinePlugin(Object.assign({
'process.env': appConfig.dev.env,
'process.env.NODE_ENV': isProduction ? '"production"' : '"development"',
'process.env.ELECTRON': JSON.stringify(process.env.ELECTRON)
}, !isProduction ? {
'__static': `"${resolveAppDir(appConfig.staticPath).replace(/\/g, '\\')}"`
} : {})),
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: resolveAppDir(appConfig.dev.entryHtml),
nodeModules: !isProduction
? isMonoRepo ? resolveAppDir('../../node_modules') : resolveAppDir('./node_modules')
: false
}),
new CaseSensitivePathsWebpackPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new FriendlyErrorsWebpackPlugin({
compilationSuccessInfo: {
messages: [`FrappeJS server started at http://${appConfig.dev.devServerHost}:${appConfig.dev.devServerPort}`],
},
}),
new webpack.ProgressPlugin(),
isProduction ? new CopyWebpackPlugin([
{
from: resolveAppDir(appConfig.staticPath),
to: resolveAppDir('./dist/electron/static'),
ignore: ['.*']
}
]) : null,
// isProduction ? new BabiliWebpackPlugin() : null,
// isProduction ? new webpack.LoaderOptionsPlugin({ minimize: true }) : null,
].filter(Boolean),
optimization: {
noEmitOnErrors: false
},
devServer: {
// contentBase: './dist', // dist path is directly configured in express
hot: true,
quiet: true
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// process is injected via DefinePlugin, although some 3rd party
// libraries may require a mock to work properly (#934)
process: 'mock',
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}
return config;
}
getElectronMainConfig = function getElectronMainConfig() {
const appConfig = getAppConfig();
return {
entry: {
main: resolveAppDir(appConfig.electron.paths.main)
},
externals: externals,
module: {
rules: [
{
test: /.js$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /.node$/,
use: 'node-loader'
}
]
},
node: {
__dirname: !isProduction,
__filename: !isProduction
},
output: {
filename: '[name].js',
libraryTarget: 'commonjs2',
path: resolveAppDir('./dist/electron')
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
// isProduction && new BabiliWebpackPlugin(),
isProduction && new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"'
})
].filter(Boolean),
resolve: {
extensions: ['.js', '.json', '.node']
},
target: 'electron-main'
}
}
}
makeConfig();
module.exports = {
getConfig,
getElectronMainConfig
};Note: the resolveAppDir function returns the cwd path concatenated with the parameter passed.
node.js webpack electron webpack-dev-server
asked Nov 21 '18 at 10:35
anto-christoanto-christo
275
I am trying to build an Electron application using Vue.js.
I am using webpack-dev-server to run the electron app in development mode.
In the webpack config I am adding all my node_modules to the externals array since I do not want them to be bundled.
The webpack development server gets started successfully without any error and the application is also launched as expected but I get the following error in the console.
Uncaught Error: Cannot find module 'frappejs'.
Note: This is not the only module that cannot be resolved. All the modules that I have added to the webpack externals arrays could not be resolved.
If I do not add them to the externals array, the node_modules are detected and the above error disappears.
Another thing that I have noticed is that if I replaceconst frappe = require('frappejs'); withconst frappe = require('../../node_modules/frappejs');
The error disappers in this case as well when I am explicitly pointing to the node_modules directory.
What maybe the reason for this behaviour?
config.js
const webpack = require('webpack');
// plugins
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsWebpackPlugin = require('case-sensitive-paths-webpack-plugin');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { getAppConfig, resolveAppDir } = require('./utils');
const appDependencies = require(resolveAppDir('./package.json')).dependencies;
const frappeDependencies = require(resolveAppDir('./node_modules/frappejs/package.json')).dependencies;
// const frappeDependencies = require('../package.json').dependencies;
let getConfig, getElectronMainConfig;
function makeConfig() {
const isProduction = process.env.NODE_ENV === 'production';
process.env.ELECTRON = 'true';
const isElectron = process.env.ELECTRON === 'true';
const isMonoRepo = process.env.MONO_REPO === 'true';
const whiteListedModules = ['vue'];
const allDependencies = Object.assign(frappeDependencies, appDependencies);
const externals = Object.keys(allDependencies).filter(d => !whiteListedModules.includes(d));
getConfig = function getConfig() {
const appConfig = getAppConfig();
const config = {
mode: isProduction ? 'production' : 'development',
context: resolveAppDir(),
entry: isElectron ? appConfig.electron.entry : appConfig.dev.entry,
externals: isElectron ? externals : undefined,
target: isElectron ? 'electron-renderer' : 'web',
output: {
path: isElectron ? resolveAppDir('./dist/electron') : resolveAppDir('./dist'),
filename: '[name].js',
// publicPath: appConfig.dev.assetsPublicPath,
libraryTarget: isElectron ? 'commonjs2' : undefined
},
devtool: !isProduction ? 'cheap-module-eval-source-map' : '',
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader'
},
{
test: /.js$/,
loader: 'babel-loader',
exclude: file => (
/node_modules/.test(file) &&
!/.vue.js/.test(file)
)
},
{
test: /.node$/,
use: 'node-loader'
},
{
test: /.css$/,
use: [
'vue-style-loader',
'css-loader'
]
},
{
test: /.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
},
resolve: {
extensions: ['.js', '.vue', '.json', '.css', '.node'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'deepmerge$': 'deepmerge/dist/umd.js',
'@': appConfig.dev.srcDir ? resolveAppDir(appConfig.dev.srcDir) : null
}
},
plugins: [
new webpack.DefinePlugin(Object.assign({
'process.env': appConfig.dev.env,
'process.env.NODE_ENV': isProduction ? '"production"' : '"development"',
'process.env.ELECTRON': JSON.stringify(process.env.ELECTRON)
}, !isProduction ? {
'__static': `"${resolveAppDir(appConfig.staticPath).replace(/\/g, '\\')}"`
} : {})),
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: resolveAppDir(appConfig.dev.entryHtml),
nodeModules: !isProduction
? isMonoRepo ? resolveAppDir('../../node_modules') : resolveAppDir('./node_modules')
: false
}),
new CaseSensitivePathsWebpackPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new FriendlyErrorsWebpackPlugin({
compilationSuccessInfo: {
messages: [`FrappeJS server started at http://${appConfig.dev.devServerHost}:${appConfig.dev.devServerPort}`],
},
}),
new webpack.ProgressPlugin(),
isProduction ? new CopyWebpackPlugin([
{
from: resolveAppDir(appConfig.staticPath),
to: resolveAppDir('./dist/electron/static'),
ignore: ['.*']
}
]) : null,
// isProduction ? new BabiliWebpackPlugin() : null,
// isProduction ? new webpack.LoaderOptionsPlugin({ minimize: true }) : null,
].filter(Boolean),
optimization: {
noEmitOnErrors: false
},
devServer: {
// contentBase: './dist', // dist path is directly configured in express
hot: true,
quiet: true
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// process is injected via DefinePlugin, although some 3rd party
// libraries may require a mock to work properly (#934)
process: 'mock',
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}
return config;
}
getElectronMainConfig = function getElectronMainConfig() {
const appConfig = getAppConfig();
return {
entry: {
main: resolveAppDir(appConfig.electron.paths.main)
},
externals: externals,
module: {
rules: [
{
test: /.js$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /.node$/,
use: 'node-loader'
}
]
},
node: {
__dirname: !isProduction,
__filename: !isProduction
},
output: {
filename: '[name].js',
libraryTarget: 'commonjs2',
path: resolveAppDir('./dist/electron')
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
// isProduction && new BabiliWebpackPlugin(),
isProduction && new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"'
})
].filter(Boolean),
resolve: {
extensions: ['.js', '.json', '.node']
},
target: 'electron-main'
}
}
}
makeConfig();
module.exports = {
getConfig,
getElectronMainConfig
};Note: the resolveAppDir function returns the cwd path concatenated with the parameter passed.
const webpack = require('webpack');
// plugins
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsWebpackPlugin = require('case-sensitive-paths-webpack-plugin');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { getAppConfig, resolveAppDir } = require('./utils');
const appDependencies = require(resolveAppDir('./package.json')).dependencies;
const frappeDependencies = require(resolveAppDir('./node_modules/frappejs/package.json')).dependencies;
// const frappeDependencies = require('../package.json').dependencies;
let getConfig, getElectronMainConfig;
function makeConfig() {
const isProduction = process.env.NODE_ENV === 'production';
process.env.ELECTRON = 'true';
const isElectron = process.env.ELECTRON === 'true';
const isMonoRepo = process.env.MONO_REPO === 'true';
const whiteListedModules = ['vue'];
const allDependencies = Object.assign(frappeDependencies, appDependencies);
const externals = Object.keys(allDependencies).filter(d => !whiteListedModules.includes(d));
getConfig = function getConfig() {
const appConfig = getAppConfig();
const config = {
mode: isProduction ? 'production' : 'development',
context: resolveAppDir(),
entry: isElectron ? appConfig.electron.entry : appConfig.dev.entry,
externals: isElectron ? externals : undefined,
target: isElectron ? 'electron-renderer' : 'web',
output: {
path: isElectron ? resolveAppDir('./dist/electron') : resolveAppDir('./dist'),
filename: '[name].js',
// publicPath: appConfig.dev.assetsPublicPath,
libraryTarget: isElectron ? 'commonjs2' : undefined
},
devtool: !isProduction ? 'cheap-module-eval-source-map' : '',
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader'
},
{
test: /.js$/,
loader: 'babel-loader',
exclude: file => (
/node_modules/.test(file) &&
!/.vue.js/.test(file)
)
},
{
test: /.node$/,
use: 'node-loader'
},
{
test: /.css$/,
use: [
'vue-style-loader',
'css-loader'
]
},
{
test: /.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
},
resolve: {
extensions: ['.js', '.vue', '.json', '.css', '.node'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'deepmerge$': 'deepmerge/dist/umd.js',
'@': appConfig.dev.srcDir ? resolveAppDir(appConfig.dev.srcDir) : null
}
},
plugins: [
new webpack.DefinePlugin(Object.assign({
'process.env': appConfig.dev.env,
'process.env.NODE_ENV': isProduction ? '"production"' : '"development"',
'process.env.ELECTRON': JSON.stringify(process.env.ELECTRON)
}, !isProduction ? {
'__static': `"${resolveAppDir(appConfig.staticPath).replace(/\/g, '\\')}"`
} : {})),
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: resolveAppDir(appConfig.dev.entryHtml),
nodeModules: !isProduction
? isMonoRepo ? resolveAppDir('../../node_modules') : resolveAppDir('./node_modules')
: false
}),
new CaseSensitivePathsWebpackPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new FriendlyErrorsWebpackPlugin({
compilationSuccessInfo: {
messages: [`FrappeJS server started at http://${appConfig.dev.devServerHost}:${appConfig.dev.devServerPort}`],
},
}),
new webpack.ProgressPlugin(),
isProduction ? new CopyWebpackPlugin([
{
from: resolveAppDir(appConfig.staticPath),
to: resolveAppDir('./dist/electron/static'),
ignore: ['.*']
}
]) : null,
// isProduction ? new BabiliWebpackPlugin() : null,
// isProduction ? new webpack.LoaderOptionsPlugin({ minimize: true }) : null,
].filter(Boolean),
optimization: {
noEmitOnErrors: false
},
devServer: {
// contentBase: './dist', // dist path is directly configured in express
hot: true,
quiet: true
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// process is injected via DefinePlugin, although some 3rd party
// libraries may require a mock to work properly (#934)
process: 'mock',
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}
return config;
}
getElectronMainConfig = function getElectronMainConfig() {
const appConfig = getAppConfig();
return {
entry: {
main: resolveAppDir(appConfig.electron.paths.main)
},
externals: externals,
module: {
rules: [
{
test: /.js$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /.node$/,
use: 'node-loader'
}
]
},
node: {
__dirname: !isProduction,
__filename: !isProduction
},
output: {
filename: '[name].js',
libraryTarget: 'commonjs2',
path: resolveAppDir('./dist/electron')
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
// isProduction && new BabiliWebpackPlugin(),
isProduction && new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"'
})
].filter(Boolean),
resolve: {
extensions: ['.js', '.json', '.node']
},
target: 'electron-main'
}
}
}
makeConfig();
module.exports = {
getConfig,
getElectronMainConfig
};const webpack = require('webpack');
// plugins
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsWebpackPlugin = require('case-sensitive-paths-webpack-plugin');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { getAppConfig, resolveAppDir } = require('./utils');
const appDependencies = require(resolveAppDir('./package.json')).dependencies;
const frappeDependencies = require(resolveAppDir('./node_modules/frappejs/package.json')).dependencies;
// const frappeDependencies = require('../package.json').dependencies;
let getConfig, getElectronMainConfig;
function makeConfig() {
const isProduction = process.env.NODE_ENV === 'production';
process.env.ELECTRON = 'true';
const isElectron = process.env.ELECTRON === 'true';
const isMonoRepo = process.env.MONO_REPO === 'true';
const whiteListedModules = ['vue'];
const allDependencies = Object.assign(frappeDependencies, appDependencies);
const externals = Object.keys(allDependencies).filter(d => !whiteListedModules.includes(d));
getConfig = function getConfig() {
const appConfig = getAppConfig();
const config = {
mode: isProduction ? 'production' : 'development',
context: resolveAppDir(),
entry: isElectron ? appConfig.electron.entry : appConfig.dev.entry,
externals: isElectron ? externals : undefined,
target: isElectron ? 'electron-renderer' : 'web',
output: {
path: isElectron ? resolveAppDir('./dist/electron') : resolveAppDir('./dist'),
filename: '[name].js',
// publicPath: appConfig.dev.assetsPublicPath,
libraryTarget: isElectron ? 'commonjs2' : undefined
},
devtool: !isProduction ? 'cheap-module-eval-source-map' : '',
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader'
},
{
test: /.js$/,
loader: 'babel-loader',
exclude: file => (
/node_modules/.test(file) &&
!/.vue.js/.test(file)
)
},
{
test: /.node$/,
use: 'node-loader'
},
{
test: /.css$/,
use: [
'vue-style-loader',
'css-loader'
]
},
{
test: /.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
},
resolve: {
extensions: ['.js', '.vue', '.json', '.css', '.node'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'deepmerge$': 'deepmerge/dist/umd.js',
'@': appConfig.dev.srcDir ? resolveAppDir(appConfig.dev.srcDir) : null
}
},
plugins: [
new webpack.DefinePlugin(Object.assign({
'process.env': appConfig.dev.env,
'process.env.NODE_ENV': isProduction ? '"production"' : '"development"',
'process.env.ELECTRON': JSON.stringify(process.env.ELECTRON)
}, !isProduction ? {
'__static': `"${resolveAppDir(appConfig.staticPath).replace(/\/g, '\\')}"`
} : {})),
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: resolveAppDir(appConfig.dev.entryHtml),
nodeModules: !isProduction
? isMonoRepo ? resolveAppDir('../../node_modules') : resolveAppDir('./node_modules')
: false
}),
new CaseSensitivePathsWebpackPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new FriendlyErrorsWebpackPlugin({
compilationSuccessInfo: {
messages: [`FrappeJS server started at http://${appConfig.dev.devServerHost}:${appConfig.dev.devServerPort}`],
},
}),
new webpack.ProgressPlugin(),
isProduction ? new CopyWebpackPlugin([
{
from: resolveAppDir(appConfig.staticPath),
to: resolveAppDir('./dist/electron/static'),
ignore: ['.*']
}
]) : null,
// isProduction ? new BabiliWebpackPlugin() : null,
// isProduction ? new webpack.LoaderOptionsPlugin({ minimize: true }) : null,
].filter(Boolean),
optimization: {
noEmitOnErrors: false
},
devServer: {
// contentBase: './dist', // dist path is directly configured in express
hot: true,
quiet: true
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// process is injected via DefinePlugin, although some 3rd party
// libraries may require a mock to work properly (#934)
process: 'mock',
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}
return config;
}
getElectronMainConfig = function getElectronMainConfig() {
const appConfig = getAppConfig();
return {
entry: {
main: resolveAppDir(appConfig.electron.paths.main)
},
externals: externals,
module: {
rules: [
{
test: /.js$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /.node$/,
use: 'node-loader'
}
]
},
node: {
__dirname: !isProduction,
__filename: !isProduction
},
output: {
filename: '[name].js',
libraryTarget: 'commonjs2',
path: resolveAppDir('./dist/electron')
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
// isProduction && new BabiliWebpackPlugin(),
isProduction && new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"'
})
].filter(Boolean),
resolve: {
extensions: ['.js', '.json', '.node']
},
target: 'electron-main'
}
}
}
makeConfig();
module.exports = {
getConfig,
getElectronMainConfig
};node.js webpack electron webpack-dev-server
node.js webpack electron webpack-dev-server
asked Nov 21 '18 at 10:35
anto-christoanto-christo
275
asked Nov 21 '18 at 10:35
anto-christoanto-christo
275
edited Nov 21 '18 at 10:46
anto-christo
asked Nov 21 '18 at 10:35
anto-christoanto-christo
275
asked Nov 21 '18 at 10:35
anto-christoanto-christo
275
asked Nov 21 '18 at 10:35
anto-christoanto-christo
275
275
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53410184%2felectron-application-cannot-resolve-any-node-module-that-is-added-to-webpack-ext%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53410184%2felectron-application-cannot-resolve-any-node-module-that-is-added-to-webpack-ext%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
