CODEWITHSUNDEEP
reactjstypescriptamazon-s3webpackbabeljs
Denis Dombrovski
Denis Dombrovski

Reputation: 127

error in deployment to AWS s3 webpack react

hello I am using webpack for bundling my production code and I am getting a weird error when I am deploying to AWS s3 and try to access the website

Uncaught ReferenceError: $RefreshReg$ is not defined

the code is working just fine in the development env

hare is my webpack config and babel config

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

and my babel config

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

thank you

Upvotes: 0

Views: 677

Answers (1)

jim wong
jim wong

Reputation: 26

remove "react-hot-loader/babel" in babel plugins, and "react-refresh/babel" should be used in the dev

// 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,
        ]
    }
}

and webpack.dev.config.js plugins should be push new ReactRefreshWebpackPlugin()(install @pmmmwh/react-refresh-webpack-plugin)

Upvotes: 1

Related Questions