Separate babel configuration file

.babelrc

@@ -0,0 +1,40 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "browsers": "last 2 versions"
+        },
+        "useBuiltIns": "usage",
+        "corejs": 3
+      }
+    ],
+    [
+      "@babel/preset-typescript",
+      {
+        "onlyRemoveTypeImports": true
+      }
+    ],
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-proposal-decorators",
+      {
+        "legacy": true
+      }
+    ],
+    [
+      "@babel/plugin-proposal-class-properties",
+      {
+        "loose": true
+      }
+    ]
+  ],
+  "env": {
+    "development": {
+      "plugins": ["react-refresh/babel"]
+    }
+  }
+}

webpack.config.ts

@@ -35,25 +35,7 @@ const config: webpack.Configuration = {
           loader: "babel-loader",
           options: {
             cacheDirectory: true,
-            babelrc: false,
+            babelrc: true,
-            presets: [
-              [
-                "@babel/preset-env",
-                {
-                  targets: { browsers: "last 2 versions" },
-                  useBuiltIns: "usage",
-                  corejs: 3,
-                }, // or whatever your project requires
-              ],
-              ["@babel/preset-typescript", { onlyRemoveTypeImports: true }],
-              "@babel/preset-react",
-            ],
-            plugins: [
-              // plugin-proposal-decorators is only needed if you're using experimental decorators in TypeScript
-              ["@babel/plugin-proposal-decorators", { legacy: true }],
-              ["@babel/plugin-proposal-class-properties", { loose: true }],
-              isDevelopment && require.resolve("react-refresh/babel"),
-            ].filter(Boolean),
           },
         },
       },