部署到 AWS s3 webpack 时出错反应

Question

你好，我正在使用 webpack 来打包我的生产代码当我部署到 AWS s3 并尝试访问网站时出现奇怪的错误

未捕获的引用错误：$RefreshReg$ 未定义

代码在开发环境中运行良好

hare 是我的 webpack 配置和 babel 配置

module.exports = {
  entry: [ "./src/index.tsx"],
  target: 'web',
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: "svg-url-loader",
            options: {
              generator: (content) => svgToMiniDataURI(content.toString()),
            },
          },
        ],
      },
      {
        test: /\.(js|ts)x?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf|png|jpg|gif)$/i,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 100000,
            },
          },
        ],
      },
    ],
  },


  plugins: [
    new NodePolyfillPlugin(),
    new CleanWebpackPlugin({
      cleanStaleWebpackAssets: false,
    }),

    new HtmlPlugin({
      favicon: "./public/favicon.ico",
      template: "./public/index.html",
    }),
  ],

  resolve: {
    extensions: [".mjs", ".js", ".tsx", ".ts", ".json", ".jsx", ".css"],
  },

  output: {
    filename: "[name].js",
    path: path.resolve("build"),
    publicPath: "/",
  },
};

module.exports = merge(common, {
  mode: "production",
  devtool: "inline-source-map",
  plugins: [
    new WorkerPlugin(),
    new Dotenv({
      path: "./config/.env.production",
    }),
  ],
});

和我的 babel 配置

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

谢谢

Answer 1

删除babel plugins中的“react-hot-loader/babel”，dev

中应使用“react-refresh/babel”

// babel.config.js
module.exports = function (api) {
    api.cache.using(() => process.env.NODE_ENV);
    return {
        "presets": [
            "@babel/env",
            ["@babel/preset-react", { "runtime": "automatic" }],
            "@babel/preset-typescript",
        ],
        "plugins": [
            api.env('development') ? 'react-refresh/babel' : null,
        ]
    }
}

和webpack.dev.config.js plugins应该是push new ReactRefreshWebpackPlugin()(install @pmmmwh/react-refresh-webpack-plugin)

部署到 AWS s3 webpack 时出错反应

error in deployment to AWS s3 webpack react

amazon-s3

typescript

reactjs

webpack

babeljs