Webpack 5 HMR throws Uncaught TypeError: cannot set property <filename> of undefined at self.webpackHotUpdate

Question

升级到 Webpack 5 后，HMR 已停止处理我们的 React 项目。

模块的当前版本是： @webpack-cli/serve@1.5.1, html-webpack-plugin@5.3.2, webpack@5.50.0, webpack-cli@4.7.2 webpack-dev-server@4.0.0-rc.0 （注意，它的失败方式与早期非 rc 版本的 webpack-dev-server 完全相同）

浏览器控制台报告：

Uncaught TypeError: Cannot set property 
'./resources/assets/js/screens/LandingPage/LandingPage.js' of undefined
at self.webpackHotUpdate (jsonp chunk loading:44)
at bundle.7fe3c7a98c4f94dbfe6d.hot-update.js:2

代码更改时会发生上述情况 - 手表会检测到代码并进行重新编译，但抛出上述错误会阻止浏览器重新加载。在浏览器上手动重新加载工作正常。

运行

webpack-cli serve --config=webpack.dev.config.js

配置文件是：

module.exports = {
    mode: 'development',
    entry: {
        [bundleNames.js]: path.join(__dirname, `${assetsDir}/js/app.js`),
        [bundleNames.css]: path.join(__dirname, `${assetsDir}/less/styles.less`)
    },
    output: {
        filename: '[name].js',
        path: path.join(__dirname, publicPath),
        publicPath: '/',
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                use: 'babel-loader',
                include: [path.resolve(__dirname, `${assetsDir}/js`)],
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader',
                ],
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.png$|\.xml$|\.ico$|\.svg$/,
                use: ['file-loader?name=[name].[ext]'],
                include: [path.resolve(__dirname, `${assetsDir}/favicons`)],
            },
            {
                test: /\.json$/,
                use: ['file-loader?name=[name].[ext]'],
                type: 'javascript/auto',
                include: [path.resolve(__dirname, `${assetsDir}/favicons`)],
            },
            {
                test: /\.woff2?$|\.ttf$|\.eot$|\.svg$|\.png$|\.jpe?g$|\.gif$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            esModule: false,
                            name: './static/[name].[ext]',
                        },
                    },
                ],
            },
            {
                test: /\.js$/,
                use: ['file-loader?name=static/[name].[ext]'],
                include: [path.resolve(__dirname, `${assetsDir}/static`)],
            },
        ],
    },
    plugins: [
        new webpack.DefinePlugin({
            'LOCALE_HASH': `'${LOCALE_HASH}'`,
        }),
        new webpack.HotModuleReplacementPlugin({}),
    ],
    resolve: {
        extensions: ['.js'],
        fallback: {
            "fs": false
        }
    },
    devServer: {
        hot: true,
        host: '0.0.0.0',
        port: 3000,
        proxy: {
            '*': {
                target: config.WEBPACK_PROXY_URL,
                changeOrigin: true
            }
        },
        headers: {
            'Access-Control-Allow-Origin': '*'
        },
        historyApiFallback: false,
    }
};

Answer 1

解决方案是：

从 Webpack 配置中删除 CSS 行：

entry: {
        [bundleNames.js]: path.join(__dirname, `${assetsDir}/js/app.js`),
-->     [bundleNames.css]: path.join(__dirname, `${assetsDir}/less/styles.less`)
    },

而是直接在 app.js 中导入 Less:

import '../less/styles.less';

Webpack 5 HMR throws Uncaught TypeError: cannot set property <filename> of undefined at self.webpackHotUpdate

Webpack 5 HMR throws Uncaught TypeError: cannot set property <filename> of undefined at self.webpackHotUpdate

javascript

webpack

hot-reload

webpack-5