HtmlWebpackPlugin throwing TypeError: Cannot read property 'hash' of undefined after updating to Webpack5

Question

我正在将 Web 应用程序中的库更新到最新版本，从而将 Webpack 升级到 Webpack5。在调整 'webpack.config.dev.js' 的参数时，我在编译期间将运行保留为以下错误：

...../node_modules/webpack/lib/NormalModule.js:1306
                hash.update(this.buildInfo.hash);
                                           ^

TypeError: Cannot read property 'hash' of undefined

这是我目前的 webpack.config.dev.js 文件（我删除了评论以尽量缩短它的长度）：

'use strict';

const autoprefixer = require('autoprefixer');
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const eslintFormatter = require('react-dev-utils/eslintFormatter');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getClientEnvironment = require('./env');
const paths = require('./paths');


const publicPath = 'http://localhost:3000/';
const publicUrl = 'http://localhost:3000/';
const env = getClientEnvironment(publicUrl);

const BundleTracker = require('webpack-bundle-tracker');

// This is the development configuration.
// It is focused on developer experience and fast rebuilds.
// The production configuration is different and lives in a separate file.
module.exports = {
    devtool: 'cheap-module-source-map',
    entry: [
        require.resolve('./polyfills'),
        require.resolve('webpack-dev-server/client') + '?http://localhost:3000',
        require.resolve('webpack/hot/dev-server'),
        paths.appIndexJs,
    ],
    output: {
        pathinfo: true,
        filename: 'static/js/bundle.js',
        chunkFilename: 'static/js/[name].chunk.js',
        publicPath: publicPath,
        devtoolModuleFilenameTemplate: info =>
            path.resolve(info.absoluteResourcePath).replace(/\/g, '/'),
    },
    resolve: {
        modules: ['node_modules', paths.appNodeModules].concat(
            process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
        ),
        extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
        alias: {
            'react-native': 'react-native-web',
        },
        plugins: [
            new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
            new BundleTracker({path: paths.statsRoot, filename: 'webpack-stats.dev.json'}),
        ],
        fallback: {
            dgram: false,
            fs: false,
            net: false,
            tls: false,
            child_process: false
        }
    },
    module: {
        strictExportPresence: true,
        rules: [
            {
                test: /\.(js|jsx|mjs)$/,
                enforce: 'pre',
                use: [
                    {
                        options: {
                            formatter: eslintFormatter,
                            eslintPath: require.resolve('eslint'),
                        },
                        loader: require.resolve('eslint-loader'),
                    },
                ],
                include: paths.appSrc,
            },
            {
                oneOf: [
                    {
                        test: /\.worker\.(js|jsx|mjs)$/,
                        include: paths.appSrc,
                        use: [
                            require.resolve("worker-loader"),
                            require.resolve("thread-loader"),
                            {
                                loader: require.resolve("babel-loader"),
                                options: {
                                    babelrc: false,
                                    presets: [require.resolve("babel-preset-react-app")],
                                    cacheDirectory: true,
                                    highlightCode: true,
                                },
                            },
                        ],
                    },
                    {
                        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
                        loader: require.resolve('url-loader'),
                        options: {
                            limit: 10000,
                            name: 'static/media/[name].[hash:8].[ext]',
                        },
                    },
                    {
                        test: /\.(js|jsx|mjs)$/,
                        include: paths.appSrc,
                        loader: require.resolve('babel-loader'),
                        options: {
                            cacheDirectory: true,
                        },
                    },
                    {
                        test: /\.(html)$/,
                        use: {
                            loader: 'html-loader',
                            options: {
                                minimize: true
                            }
                        }
                    },
                    {
                        test: /\.css$/,
                        use: [
                            require.resolve('style-loader'),
                            {
                                loader: require.resolve('css-loader'),
                                options: {
                                    importLoaders: 1,
                                },
                            },
                            {
                                loader: require.resolve('postcss-loader'),
                                options: {
                                    ident: 'postcss',
                                    plugins: () => [
                                        require('postcss-flexbugs-fixes'),
                                        autoprefixer({
                                            browsers: [
                                                '>1%',
                                                'last 4 versions',
                                                'Firefox ESR',
                                                'not ie < 9', 
                                            ],
                                            flexbox: 'no-2009',
                                        }),
                                    ],
                                },
                            },
                        ],
                    },
                    {
                        exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
                        loader: require.resolve('file-loader'),
                        options: {
                            name: 'static/media/[name].[hash:8].[ext]',
                        },
                    },
                ],
            },
            // ** STOP ** Are you adding a new loader?
            // Make sure to add the new loader(s) before the "file" loader.
        ],
    },
    plugins: [
        new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
        // Generates an `index.html` file with the <script> injected.
        new HtmlWebpackPlugin({
            // inject: true,
            template: paths.appHtml,
            hash: false,
        }),
        new webpack.DefinePlugin(env.stringified),
        new webpack.HotModuleReplacementPlugin(),
        new CaseSensitivePathsPlugin(),
        new WatchMissingNodeModulesPlugin(paths.appNodeModules),
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
        new BundleTracker({path: paths.statsRoot, filename: 'webpack-stats.dev.json'}),
    ],
    performance: {
        hints: false,
    },
    optimization: {
        moduleIds: 'named',
    }
};

这是我当前的相关库（或者至少是我认为相关的库，如果需要，我肯定会 post 任何其他库）

html-webpack-plugin@5.3.2
webpack@5.51.1
react-dev-utils@11.0.4

我认为导致问题的部分是插件，特别是 HtmlWebpackPlugin：

plugins: [
*** I think the HtmlWebpackPlugin is causing the issue ***
        new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
        // Generates an `index.html` file with the <script> injected.
        new HtmlWebpackPlugin({
            // inject: true,
            template: paths.appHtml,
            hash: false,
        }),
...
    ],

知道如何修复错误吗？我觉得我调用 HtmlWebpackPlugin 是正确的，但我是不是很笨？

更新 1： 反转 InterpolateHtmlPlugin 和 HtmlWebpackPlugin 产生相同的错误

更新2： HtmlWebpackPlugin 已确定不是问题的原因，此时错误正在追溯到Webpack。

更新 3： Git repo 以重新创建错误位于：https://github.com/mexicantexan/webpack-error-reproduction 并且在以下 link 中提出了一个问题：https://github.com/webpack/webpack/issues/14142

更新 4： 已解决。在下面检查带有复选标记的解决方案。

Answer 1

原来我们把 BundleTracker 放在了错误的地方。在配置文件中，我们将其从 module.exports.resolve.plugins 中删除，应用程序立即启动。向 alexander-akait 大声疾呼！

HtmlWebpackPlugin throwing TypeError: Cannot read property 'hash' of undefined after updating to Webpack5

HtmlWebpackPlugin throwing TypeError: Cannot read property 'hash' of undefined after updating to Webpack5

webpack

webpack-dev-server

html-webpack-plugin

react-devtools