Webpack 5样式热更新报Uncaught TypeError错误如何解决？

错误根因 #

该报错是Webpack5 开发环境同时开启HMR热更新、使用MiniCssExtractPlugin.loader导致的兼容问题。
MiniCssExtractPlugin核心作用是生产环境抽离独立CSS文件，其loader默认对开发环境热更新的适配存在缺陷，热更新替换样式模块时会找不到对应的挂载对象，因此抛出类型错误；由于样式本身已经完成增量构建注入到页面中，所以新样式可以正常生效。

修复方案 #

方案1（推荐）：开发/生产环境区分loader #

开发环境用style-loader处理样式注入，仅生产环境启用MiniCssExtractPlugin抽离CSS，修改webpack配置的module.rules部分即可：

module: {
    rules: [
        {
            test: /\.css$/i,
            use: [
                // 开发环境用style-loader，支持HMR无兼容问题
                isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
                {
                    loader: "css-loader",
                    options: {
                      sourceMap: true,
                    },
                  },
              ],
        }
    ]
},

方案2：强制开发环境用MiniCssExtractPlugin并开启热更适配 #

如果确实需要开发环境也输出独立CSS文件，可以给MiniCssExtractPlugin.loader开启热更新适配配置：

module: {
    rules: [
        {
            test: /\.css$/i,
            use: [
                {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        // 开发环境开启HMR适配
                        hmr: isDev,
                        // 按需配置公共路径避免样式资源加载路径错误
                        publicPath: '/'
                    }
                },
                {
                    loader: "css-loader",
                    options: {
                      sourceMap: true,
                    },
                  },
              ],
        }
    ]
},

修改配置后重启devServer即可验证，修改样式文件不会再抛出该报错。

内容的提问来源于stack exchange，提问作者Rafael Shepard