React项目Webpack打包后部署AWS S3出现$RefreshReg$未定义报错

报错中的$RefreshReg$是React热更新能力专用的全局变量，该变量由react-refresh配套工具注入。你在Babel配置中全局开启了react-refresh/babel和react-hot-loader/babel两个仅用于开发环境的热更新插件，生产环境打包时这些插件会在代码中注入热更新相关的变量调用，但生产环境的Webpack配置没有提供对应的变量定义逻辑，因此触发引用错误。本地开发环境有完整的热更新配套插件，所以运行正常。

1. 修改Babel配置，限定热更新类插件仅在开发环境加载：

{
  "presets": [
    "@babel/env",
    ["@babel/preset-react", { "runtime": "automatic" }],
    "@babel/preset-typescript"
  ],
  "env": {
    "development": {
      "plugins": ["react-hot-loader/babel","react-refresh/babel"]
    }
  }
}

修改后Babel会根据当前运行的NODE_ENV环境变量判断是否加载热更新插件，生产环境打包时会自动跳过这两个插件。

2. 确认Webpack开发环境配置中已引入ReactRefreshWebpackPlugin，生产环境配置不要添加该插件。

• 生产环境不要使用inline-source-map配置，该配置会将SourceMap直接写入产物JS文件，大幅增加包体积，建议替换为source-map，同时可配置不对外发布SourceMap文件避免源码泄露。
• 若你使用的是React 16.13+版本，react-hot-loader已经被react-refresh完全替代，可以直接移除所有react-hot-loader相关的依赖与配置，减少冗余代码。

内容的提问来源于stack exchange，提问作者Denis Dombrovski