I’m trying to upgrade my application in electron, specifically from webpack 4.29.6 to 5.93.0, but I’m running into a problem that I can’t solve. The error during compilation is this:
<code>[webpack-cli] TypeError: Cannot read properties of undefined (reading 'tapPromise')
at ESLintWebpackPlugin.apply (..sourceswebappnode_moduleseslint-webpack-plugindistindex.js:63:26)
at exports.createResolver (..sourceswebappnode_modulesenhanced-resolvelibResolverFactory.js:695:11)
at ResolverFactory._create (..sourceswebappnode_moduleswebpacklibResolverFactory.js:135:12)
at ResolverFactory.get (..sourceswebappnode_moduleswebpacklibResolverFactory.js:116:28)
at NormalModuleFactory.getResolver (..sourceswebappnode_moduleswebpacklibNormalModuleFactory.js:1302:31)
at defaultResolve (..sourceswebappnode_moduleswebpacklibNormalModuleFactory.js:759:35)
at ..sourceswebappnode_moduleswebpacklibNormalModuleFactory.js:828:10
at Hook.eval [as callAsync] (eval at create (..sourceswebappnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:7:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (..sourceswebappnode_modulestapablelibHook.js:18:14)
at ..sourceswebappnode_moduleswebpacklibNormalModuleFactory.js:340:24
</code>
<code>[webpack-cli] TypeError: Cannot read properties of undefined (reading 'tapPromise')
at ESLintWebpackPlugin.apply (..sourceswebappnode_moduleseslint-webpack-plugindistindex.js:63:26)
at exports.createResolver (..sourceswebappnode_modulesenhanced-resolvelibResolverFactory.js:695:11)
at ResolverFactory._create (..sourceswebappnode_moduleswebpacklibResolverFactory.js:135:12)
at ResolverFactory.get (..sourceswebappnode_moduleswebpacklibResolverFactory.js:116:28)
at NormalModuleFactory.getResolver (..sourceswebappnode_moduleswebpacklibNormalModuleFactory.js:1302:31)
at defaultResolve (..sourceswebappnode_moduleswebpacklibNormalModuleFactory.js:759:35)
at ..sourceswebappnode_moduleswebpacklibNormalModuleFactory.js:828:10
at Hook.eval [as callAsync] (eval at create (..sourceswebappnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:7:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (..sourceswebappnode_modulestapablelibHook.js:18:14)
at ..sourceswebappnode_moduleswebpacklibNormalModuleFactory.js:340:24
</code>
[webpack-cli] TypeError: Cannot read properties of undefined (reading 'tapPromise')
at ESLintWebpackPlugin.apply (..sourceswebappnode_moduleseslint-webpack-plugindistindex.js:63:26)
at exports.createResolver (..sourceswebappnode_modulesenhanced-resolvelibResolverFactory.js:695:11)
at ResolverFactory._create (..sourceswebappnode_moduleswebpacklibResolverFactory.js:135:12)
at ResolverFactory.get (..sourceswebappnode_moduleswebpacklibResolverFactory.js:116:28)
at NormalModuleFactory.getResolver (..sourceswebappnode_moduleswebpacklibNormalModuleFactory.js:1302:31)
at defaultResolve (..sourceswebappnode_moduleswebpacklibNormalModuleFactory.js:759:35)
at ..sourceswebappnode_moduleswebpacklibNormalModuleFactory.js:828:10
at Hook.eval [as callAsync] (eval at create (..sourceswebappnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:7:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (..sourceswebappnode_modulestapablelibHook.js:18:14)
at ..sourceswebappnode_moduleswebpacklibNormalModuleFactory.js:340:24
this is my webpack-app.config.js:
<code> 'use strict';
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const ESLintWebpackPlugin = require('eslint-webpack-plugin');
const paths = require('./config/paths');
const getClientEnvironment = require('./config/env');
// Webpack uses `publicPath` to determine where the app is being served from.
const publicPath = paths.servedPath;
const shouldUseRelativeAssetPaths = publicPath === './';
const publicUrl = publicPath.slice(0, -1);
const env = getClientEnvironment(publicUrl);
// Note: defined here because it will be used more than once.
const cssFilename = 'static/css/[name].css';
module.exports = {
mode: 'development',
bail: true,
devtool: 'cheap-module-source-map',
entry: [require.resolve('./src/polyfills'), 'babel-polyfill', paths.appIndexJs],
output: {
path: paths.appBuild,
filename: 'static/js/[name].js',
chunkFilename: 'static/js/[name].chunk.js',
publicPath: publicPath,
devtoolModuleFilenameTemplate: info => path.relative(paths.appSrc, info.absoluteResourcePath).replace(/\/g, '/')
},
resolve: {
modules: ['node_modules', paths.appNodeModules].concat(
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
),
extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'],
alias: {
'react-native': 'react-native-web'
},
plugins: [
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
new ESLintWebpackPlugin({ extensions: ['js', 'jsx'] }),
]
},
module: {
strictExportPresence: true,
rules: [
{
test: /.(js|jsx)$/,
enforce: 'pre',
use: [
{
options: {
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint')
},
loader: 'eslint-webpack-plugin',
}
],
include: paths.appSrc
},
{
oneOf: [
{
test: [/.bmp$/, /.gif$/, /.jpe?g$/, /.png$/],
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 10000, // 10kb
},
},
generator: {
filename: 'static/media/[name].[hash][ext]'
}
},
{
test: /.svg$/,
use: [
{
loader: '@svgr/webpack',
options: {
svgoConfig: {
plugins: [
{ removeViewBox: false },
{ cleanupIDs: false },
{ prefixIds: false }
]
}
}
},
{
loader: 'url-loader',
options: {
limit: 10000,
name: 'static/media/[name].[hash].[ext]'
}
}
]
},
{
test: /.(js|jsx)$/,
include: paths.appSrc,
use: {
loader: require.resolve('babel-loader'),
options: {
sourceMap: true
}
}
},
{
test: /.css$/,
use: [
"style-loader",
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
[
"postcss-preset-env",
{
// Options
},
],
],
},
},
},
],
},
{
test: /.(eot|otf|ttf|woff|woff2)$/,
type: 'asset/resource',
generator: {
filename: 'static/media/[name].[hash][ext]'
}
},
{
type: 'asset/resource',
exclude: [/.js$/, /.html$/, /.json$/],
generator: {
filename: 'static/media/[name].[hash][ext]'
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: './index.html',
inject: true,
template: paths.appHtml,
minify: {
removeComments: false,
collapseWhitespace: false,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true
},
templateParameters: {
PUBLIC_URL: publicUrl
}
}),
new webpack.DefinePlugin(env.stringified),
new MiniCssExtractPlugin({
filename: cssFilename
}),
new ESLintPlugin({
extensions: ['js', 'jsx'],
eslintPath: require.resolve('eslint'),
formatter: require.resolve('react-dev-utils/eslintFormatter'),
}),
new webpack.IgnorePlugin({ resourceRegExp: /^./locale$/, contextRegExp: /moment$/ })
],
externals: {
'electron-edge-js': 'commonjs2 electron-edge-js',
},
performance: {
hints: false,
maxEntrypointSize: 512000,
maxAssetSize: 512000
}
};
</code>
<code> 'use strict';
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const ESLintWebpackPlugin = require('eslint-webpack-plugin');
const paths = require('./config/paths');
const getClientEnvironment = require('./config/env');
// Webpack uses `publicPath` to determine where the app is being served from.
const publicPath = paths.servedPath;
const shouldUseRelativeAssetPaths = publicPath === './';
const publicUrl = publicPath.slice(0, -1);
const env = getClientEnvironment(publicUrl);
// Note: defined here because it will be used more than once.
const cssFilename = 'static/css/[name].css';
module.exports = {
mode: 'development',
bail: true,
devtool: 'cheap-module-source-map',
entry: [require.resolve('./src/polyfills'), 'babel-polyfill', paths.appIndexJs],
output: {
path: paths.appBuild,
filename: 'static/js/[name].js',
chunkFilename: 'static/js/[name].chunk.js',
publicPath: publicPath,
devtoolModuleFilenameTemplate: info => path.relative(paths.appSrc, info.absoluteResourcePath).replace(/\/g, '/')
},
resolve: {
modules: ['node_modules', paths.appNodeModules].concat(
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
),
extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'],
alias: {
'react-native': 'react-native-web'
},
plugins: [
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
new ESLintWebpackPlugin({ extensions: ['js', 'jsx'] }),
]
},
module: {
strictExportPresence: true,
rules: [
{
test: /.(js|jsx)$/,
enforce: 'pre',
use: [
{
options: {
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint')
},
loader: 'eslint-webpack-plugin',
}
],
include: paths.appSrc
},
{
oneOf: [
{
test: [/.bmp$/, /.gif$/, /.jpe?g$/, /.png$/],
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 10000, // 10kb
},
},
generator: {
filename: 'static/media/[name].[hash][ext]'
}
},
{
test: /.svg$/,
use: [
{
loader: '@svgr/webpack',
options: {
svgoConfig: {
plugins: [
{ removeViewBox: false },
{ cleanupIDs: false },
{ prefixIds: false }
]
}
}
},
{
loader: 'url-loader',
options: {
limit: 10000,
name: 'static/media/[name].[hash].[ext]'
}
}
]
},
{
test: /.(js|jsx)$/,
include: paths.appSrc,
use: {
loader: require.resolve('babel-loader'),
options: {
sourceMap: true
}
}
},
{
test: /.css$/,
use: [
"style-loader",
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
[
"postcss-preset-env",
{
// Options
},
],
],
},
},
},
],
},
{
test: /.(eot|otf|ttf|woff|woff2)$/,
type: 'asset/resource',
generator: {
filename: 'static/media/[name].[hash][ext]'
}
},
{
type: 'asset/resource',
exclude: [/.js$/, /.html$/, /.json$/],
generator: {
filename: 'static/media/[name].[hash][ext]'
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: './index.html',
inject: true,
template: paths.appHtml,
minify: {
removeComments: false,
collapseWhitespace: false,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true
},
templateParameters: {
PUBLIC_URL: publicUrl
}
}),
new webpack.DefinePlugin(env.stringified),
new MiniCssExtractPlugin({
filename: cssFilename
}),
new ESLintPlugin({
extensions: ['js', 'jsx'],
eslintPath: require.resolve('eslint'),
formatter: require.resolve('react-dev-utils/eslintFormatter'),
}),
new webpack.IgnorePlugin({ resourceRegExp: /^./locale$/, contextRegExp: /moment$/ })
],
externals: {
'electron-edge-js': 'commonjs2 electron-edge-js',
},
performance: {
hints: false,
maxEntrypointSize: 512000,
maxAssetSize: 512000
}
};
</code>
'use strict';
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const ESLintWebpackPlugin = require('eslint-webpack-plugin');
const paths = require('./config/paths');
const getClientEnvironment = require('./config/env');
// Webpack uses `publicPath` to determine where the app is being served from.
const publicPath = paths.servedPath;
const shouldUseRelativeAssetPaths = publicPath === './';
const publicUrl = publicPath.slice(0, -1);
const env = getClientEnvironment(publicUrl);
// Note: defined here because it will be used more than once.
const cssFilename = 'static/css/[name].css';
module.exports = {
mode: 'development',
bail: true,
devtool: 'cheap-module-source-map',
entry: [require.resolve('./src/polyfills'), 'babel-polyfill', paths.appIndexJs],
output: {
path: paths.appBuild,
filename: 'static/js/[name].js',
chunkFilename: 'static/js/[name].chunk.js',
publicPath: publicPath,
devtoolModuleFilenameTemplate: info => path.relative(paths.appSrc, info.absoluteResourcePath).replace(/\/g, '/')
},
resolve: {
modules: ['node_modules', paths.appNodeModules].concat(
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
),
extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'],
alias: {
'react-native': 'react-native-web'
},
plugins: [
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
new ESLintWebpackPlugin({ extensions: ['js', 'jsx'] }),
]
},
module: {
strictExportPresence: true,
rules: [
{
test: /.(js|jsx)$/,
enforce: 'pre',
use: [
{
options: {
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint')
},
loader: 'eslint-webpack-plugin',
}
],
include: paths.appSrc
},
{
oneOf: [
{
test: [/.bmp$/, /.gif$/, /.jpe?g$/, /.png$/],
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 10000, // 10kb
},
},
generator: {
filename: 'static/media/[name].[hash][ext]'
}
},
{
test: /.svg$/,
use: [
{
loader: '@svgr/webpack',
options: {
svgoConfig: {
plugins: [
{ removeViewBox: false },
{ cleanupIDs: false },
{ prefixIds: false }
]
}
}
},
{
loader: 'url-loader',
options: {
limit: 10000,
name: 'static/media/[name].[hash].[ext]'
}
}
]
},
{
test: /.(js|jsx)$/,
include: paths.appSrc,
use: {
loader: require.resolve('babel-loader'),
options: {
sourceMap: true
}
}
},
{
test: /.css$/,
use: [
"style-loader",
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
[
"postcss-preset-env",
{
// Options
},
],
],
},
},
},
],
},
{
test: /.(eot|otf|ttf|woff|woff2)$/,
type: 'asset/resource',
generator: {
filename: 'static/media/[name].[hash][ext]'
}
},
{
type: 'asset/resource',
exclude: [/.js$/, /.html$/, /.json$/],
generator: {
filename: 'static/media/[name].[hash][ext]'
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: './index.html',
inject: true,
template: paths.appHtml,
minify: {
removeComments: false,
collapseWhitespace: false,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true
},
templateParameters: {
PUBLIC_URL: publicUrl
}
}),
new webpack.DefinePlugin(env.stringified),
new MiniCssExtractPlugin({
filename: cssFilename
}),
new ESLintPlugin({
extensions: ['js', 'jsx'],
eslintPath: require.resolve('eslint'),
formatter: require.resolve('react-dev-utils/eslintFormatter'),
}),
new webpack.IgnorePlugin({ resourceRegExp: /^./locale$/, contextRegExp: /moment$/ })
],
externals: {
'electron-edge-js': 'commonjs2 electron-edge-js',
},
performance: {
hints: false,
maxEntrypointSize: 512000,
maxAssetSize: 512000
}
};
the versions of webpack, webpack-cli and eslint-webpack-plugin are:
“webpack-cli”: “^5.1.4”
“webpack”: “^5.93.0”,
“eslint-webpack-plugin”: “^4.2.0”,
Someone can help me? I have delete the node_modules and package.lock and reinstall all but without success