FIX | Change webpack config to prevent fail on build

config/webpack.config.js

@@ -82,7 +82,7 @@ const hasJsxRuntime = (() => {
 
 // This is the production and development configuration.
 // It is focused on developer experience, fast rebuilds, and a minimal bundle.
-module.exports = function(webpackEnv) {
+module.exports = function (webpackEnv) {
   const isEnvDevelopment = webpackEnv === "development";
   const isEnvProduction = webpackEnv === "production";
 
@@ -107,9 +107,11 @@ module.exports = function(webpackEnv) {
         loader: MiniCssExtractPlugin.loader,
         // css is located in `static/css`, use '../../' to locate index.html folder
         // in production `paths.publicUrlOrPath` can be a relative path
-        options: paths.publicUrlOrPath.startsWith(".")
-          ? { publicPath: "../../" }
-          : {},
+        options: paths.publicUrlOrPath.startsWith(".") ?
+          {
+            publicPath: "../../"
+          } :
+          {},
       },
       {
         loader: require.resolve("css-loader"),
@@ -142,21 +144,18 @@ module.exports = function(webpackEnv) {
       },
     ].filter(Boolean);
     if (preProcessor) {
-      loaders.push(
-        {
+      loaders.push({
         loader: require.resolve("resolve-url-loader"),
         options: {
           sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
           root: paths.appSrc,
         },
-        },
-        {
+      }, {
         loader: require.resolve(preProcessor),
         options: {
           sourceMap: true,
         },
-        }
-      );
+      });
     }
     return loaders;
   };
@@ -165,16 +164,15 @@ module.exports = function(webpackEnv) {
     mode: isEnvProduction ? "production" : isEnvDevelopment && "development",
     // Stop compilation early in production
     bail: isEnvProduction,
-    devtool: isEnvProduction
-      ? shouldUseSourceMap
-        ? "source-map"
-        : false
-      : isEnvDevelopment && "cheap-module-source-map",
+    devtool: isEnvProduction ?
+      shouldUseSourceMap ?
+      "source-map" :
+      false :
+      isEnvDevelopment && "cheap-module-source-map",
     // These are the "entry points" to our application.
     // This means they will be the "root" imports that are included in JS bundle.
-    entry:
-      isEnvDevelopment && !shouldUseReactRefresh
-        ? [
+    entry: isEnvDevelopment && !shouldUseReactRefresh ?
+      [
         // Include an alternative client for WebpackDevServer. A client's job is to
         // connect to WebpackDevServer by a socket and get notified about changes.
         // When you save a file, the client will either apply hot updates (in case
@@ -195,8 +193,8 @@ module.exports = function(webpackEnv) {
         // We include the app code last so that if there is a runtime error during
         // initialization, it doesn't blow up the WebpackDevServer client, and
         // changing JS code would still trigger a refresh.
-          ]
-        : paths.appIndexJs,
+      ] :
+      paths.appIndexJs,
     output: {
       // The build folder.
       path: isEnvProduction ? paths.appBuild : undefined,
@@ -204,26 +202,26 @@ module.exports = function(webpackEnv) {
       pathinfo: isEnvDevelopment,
       // There will be one main bundle, and one file per asynchronous chunk.
       // In development, it does not produce real files.
-      filename: isEnvProduction
-        ? "static/js/[name].[contenthash:8].js"
-        : isEnvDevelopment && "static/js/bundle.js",
+      filename: isEnvProduction ?
+        "static/js/[name].[contenthash:8].js" :
+        isEnvDevelopment && "static/js/bundle.js",
       // TODO: remove this when upgrading to webpack 5
       futureEmitAssets: true,
       // There are also additional JS chunk files if you use code splitting.
-      chunkFilename: isEnvProduction
-        ? "static/js/[name].[contenthash:8].chunk.js"
-        : isEnvDevelopment && "static/js/[name].chunk.js",
+      chunkFilename: isEnvProduction ?
+        "static/js/[name].[contenthash:8].chunk.js" :
+        isEnvDevelopment && "static/js/[name].chunk.js",
       // webpack uses `publicPath` to determine where the app is being served from.
       // It requires a trailing slash, or the file assets will get an incorrect path.
       // We inferred the "public path" (such as / or /my-project) from homepage.
       publicPath: paths.publicUrlOrPath,
       // Point sourcemap entries to original disk location (format as URL on Windows)
-      devtoolModuleFilenameTemplate: isEnvProduction
-        ? (info) =>
+      devtoolModuleFilenameTemplate: isEnvProduction ?
+        (info) =>
         path
         .relative(paths.appSrc, info.absoluteResourcePath)
-              .replace(/\\/g, "/")
-        : isEnvDevelopment &&
+        .replace(/\\/g, "/") :
+        isEnvDevelopment &&
         ((info) =>
           path.resolve(info.absoluteResourcePath).replace(/\\/g, "/")),
       // Prevents conflicts when multiple webpack runtimes (from different apps)
@@ -281,19 +279,23 @@ module.exports = function(webpackEnv) {
         new OptimizeCSSAssetsPlugin({
           cssProcessorOptions: {
             parser: safePostCssParser,
-            map: shouldUseSourceMap
-              ? {
+            map: shouldUseSourceMap ?
+              {
                 // `inline: false` forces the sourcemap to be output into a
                 // separate file
                 inline: false,
                 // `annotation: true` appends the sourceMappingURL to the end of
                 // the css file, helping the browser find the sourcemap
                 annotation: true,
-                }
-              : false,
+              } :
+              false,
           },
           cssProcessorPluginOptions: {
-            preset: ["default", { minifyFontValues: { removeQuotes: false } }],
+            preset: ["default", {
+              minifyFontValues: {
+                removeQuotes: false
+              }
+            }],
           },
         }),
       ],
@@ -365,18 +367,16 @@ module.exports = function(webpackEnv) {
       strictExportPresence: true,
       rules: [
         // Disable require.ensure as it's not a standard language feature.
-        { parser: { requireEnsure: false } },
+        {
+          parser: {
+            requireEnsure: false
+          }
+        },
         {
           include: /node_modules/,
           test: /\.mjs$/,
           type: "javascript/auto",
         },
-        {
-          test: /\.js$/,
-          // exclude: /node_modules/, // This is the line that caused the problem. Remove or comment it out.
-          enforce: "pre",
-          use: ["source-map-loader"],
-        },
         {
           // "oneOf" will traverse all following loaders until one will
           // match the requirements. When no loader matches it will fall
@@ -434,8 +434,7 @@ module.exports = function(webpackEnv) {
                     {
                       loaderMap: {
                         svg: {
-                          ReactComponent:
-                            "@svgr/webpack?-svgo,+titleProp,+ref![path]",
+                          ReactComponent: "@svgr/webpack?-svgo,+titleProp,+ref![path]",
                         },
                       },
                     },
@@ -481,7 +480,9 @@ module.exports = function(webpackEnv) {
                 presets: [
                   [
                     require.resolve("babel-preset-react-app/dependencies"),
-                    { helpers: true },
+                    {
+                      helpers: true
+                    },
                   ],
                 ],
                 cacheDirectory: true,
@@ -507,9 +508,9 @@ module.exports = function(webpackEnv) {
               exclude: cssModuleRegex,
               use: getStyleLoaders({
                 importLoaders: 1,
-                sourceMap: isEnvProduction
-                  ? shouldUseSourceMap
-                  : isEnvDevelopment,
+                sourceMap: isEnvProduction ?
+                  shouldUseSourceMap :
+                  isEnvDevelopment,
               }),
               // Don't consider CSS imports dead code even if the
               // containing package claims to have no side effects.
@@ -523,9 +524,9 @@ module.exports = function(webpackEnv) {
               test: cssModuleRegex,
               use: getStyleLoaders({
                 importLoaders: 1,
-                sourceMap: isEnvProduction
-                  ? shouldUseSourceMap
-                  : isEnvDevelopment,
+                sourceMap: isEnvProduction ?
+                  shouldUseSourceMap :
+                  isEnvDevelopment,
                 modules: {
                   getLocalIdent: getCSSModuleLocalIdent,
                 },
@@ -537,12 +538,11 @@ module.exports = function(webpackEnv) {
             {
               test: sassRegex,
               exclude: sassModuleRegex,
-              use: getStyleLoaders(
-                {
+              use: getStyleLoaders({
                   importLoaders: 3,
-                  sourceMap: isEnvProduction
-                    ? shouldUseSourceMap
-                    : isEnvDevelopment,
+                  sourceMap: isEnvProduction ?
+                    shouldUseSourceMap :
+                    isEnvDevelopment,
                 },
                 "sass-loader"
               ),
@@ -556,12 +556,11 @@ module.exports = function(webpackEnv) {
             // using the extension .module.scss or .module.sass
             {
               test: sassModuleRegex,
-              use: getStyleLoaders(
-                {
+              use: getStyleLoaders({
                   importLoaders: 3,
-                  sourceMap: isEnvProduction
-                    ? shouldUseSourceMap
-                    : isEnvDevelopment,
+                  sourceMap: isEnvProduction ?
+                    shouldUseSourceMap :
+                    isEnvDevelopment,
                   modules: {
                     getLocalIdent: getCSSModuleLocalIdent,
                   },
@@ -595,14 +594,12 @@ module.exports = function(webpackEnv) {
       new Dotenv(),
       // Generates an `index.html` file with the <script> injected.
       new HtmlWebpackPlugin(
-        Object.assign(
-          {},
-          {
+        Object.assign({}, {
             inject: true,
             template: paths.appHtml,
           },
-          isEnvProduction
-            ? {
+          isEnvProduction ?
+          {
             minify: {
               removeComments: true,
               collapseWhitespace: true,
@@ -615,8 +612,8 @@ module.exports = function(webpackEnv) {
               minifyCSS: true,
               minifyURLs: true,
             },
-              }
-            : undefined
+          } :
+          undefined
         )
       ),
       // Inlines the webpack runtime script. This script is too small to warrant
@@ -725,12 +722,12 @@ module.exports = function(webpackEnv) {
         }),
         async: isEnvDevelopment,
         checkSyntacticErrors: true,
-          resolveModuleNameModule: process.versions.pnp
-            ? `${__dirname}/pnpTs.js`
-            : undefined,
-          resolveTypeReferenceDirectiveModule: process.versions.pnp
-            ? `${__dirname}/pnpTs.js`
-            : undefined,
+        resolveModuleNameModule: process.versions.pnp ?
+          `${__dirname}/pnpTs.js` :
+          undefined,
+        resolveTypeReferenceDirectiveModule: process.versions.pnp ?
+          `${__dirname}/pnpTs.js` :
+          undefined,
         tsconfig: paths.appTsConfig,
         reportFiles: [
           // This one is specifically to match during CI tests,