$RefreshReg$ is not defined react使用react-refresh生产编译时出现的报错问题

问题描述

编译部署后出现控制台 $RefreshReg$ is not defined错误

查看源代码发现这应该快速刷新react代码的插件问题

解决方案

在github上有讨论如何解决这个问题和产生原因，参看issues 我是用了以下方案配置解决，将babel的react-refresh配置转移到 webpack里babel-loader中进行配置，并加上生产环境判断条件

webpack.config.js 配置如下

module.exports = {
        ...
        module: {
            rules: [
                {
                    test: /\.(js|tsx)$/,
                    use: [
                        {
                            loader: 'babel-loader',
                            options: {
                                plugins: [
                                    env.isEnvDevelopment && require.resolve('react-refresh/babel'),
                                ],
                            },
                        },
                    ],
                    exclude: /node_modules/,
                },
        }
}