HtmlWebpack Plugin引发类型错误：更新到WebPack5后，无法读取未定义的属性&#39；hash&#39； [英] HtmlWebpackPlugin throwing TypeError: Cannot read property 'hash' of undefined after updating to Webpack5

问题描述

我正在将我们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',
    }
};

这里是我目前的相关库(或者至少是我认为相关的库，如果需要，我肯定会发布其他库)

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

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

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,
        }),
...
    ],

您对如何修复错误有什么想法吗？我觉得我调用HtmlWebpack Plugin是正确的，但我是哑巴吗？

更新1：倒置InterpolateHtmlPlugin和HtmlWebpack Plugin产生相同的错误

更新2：HtmlWebpack Plugin已确定不是问题的原因，目前正在将错误追溯到webpack。

更新3：重新创建错误的Git Repo：https://github.com/mexicantexan/webpack-error-reproduction 问题已经在以下链接中打开：https://github.com/webpack/webpack/issues/14142

更新4：已解决。请查看下面的复选标记解决方案。

推荐答案

原来我们把BundleTracker放错了位置。在配置文件中，我们将其从mode.exports.Resolve.plugins中删除，应用程序立即启动。向alexander-akait大声喊出来！！

这篇关于HtmlWebpack Plugin引发类型错误：更新到WebPack5后，无法读取未定义的属性&#39；hash&#39；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！