fix(admin-ui): modify webpack config to prevent throwing sourcemap errors (#5484)

.changeset/wild-keys-beam.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/admin-ui": patch
+---
+
+fix(admin-ui): Make Webpack config more fault tolerant. Removes loader that would throw if dependency was missing source maps

packages/admin-ui/package.json

@@ -103,7 +103,6 @@
     "react-router-dom": "6.8.0",
     "react-select": "^5.5.4",
     "react-table": "^7.7.0",
-    "source-map-loader": "^4.0.1",
     "style-loader": "^3.3.3",
     "swc-loader": "^0.2.3",
     "swc-minify-webpack-plugin": "^2.1.1",

packages/admin-ui/src/node/webpack/get-webpack-config.ts

@@ -54,12 +54,11 @@ export function getWebpackConfig({
           fancy: reporting === "fancy",
         }),
       ]
-    : [new MiniCssExtractPlugin()]
+    : [new MiniCssExtractPlugin(), new ReactRefreshPlugin()]
 
   return {
     mode: env,
-    bail: !!isProd,
+    devtool: isProd ? false : "inline-source-map",
-    devtool: isProd ? false : "eval-source-map",
     entry: [entry],
     output: {
       path: dest,
@@ -91,6 +90,8 @@ export function getWebpackConfig({
                 transform: {
                   react: {
                     runtime: "automatic",
+                    development: !isProd,
+                    refresh: !isProd,
                   },
                 },
               },
@@ -146,11 +147,6 @@ export function getWebpackConfig({
           test: /\.(eot|otf|ttf|woff|woff2)$/,
           type: "asset/resource",
         },
-        {
-          test: /\.(js|mjs)(\.map)?$/,
-          enforce: "pre",
-          use: ["source-map-loader"],
-        },
         {
           test: /\.m?jsx?$/,
           resolve: {
@@ -188,9 +184,8 @@ export function getWebpackConfig({
         ],
       }),
 
-      !isProd && new ReactRefreshPlugin(),
-
       ...webpackPlugins,
     ].filter(Boolean),
+    stats: isProd ? "errors-only" : "errors-warnings",
   }
 }

packages/admin-ui/webpack.config.dev.ts

@@ -1,5 +1,6 @@
 import { DuplicateReporterPlugin } from "duplicate-dependencies-webpack-plugin"
 import path from "path"
+import openBrowser from "react-dev-utils/openBrowser"
 import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer"
 import { Configuration } from "webpack-dev-server"
 import { getWebpackConfig } from "./src/node/webpack/get-webpack-config"
@@ -34,11 +35,19 @@ const getDevServerConfig = () => {
     ...{
       devServer: {
         port: 7001,
+        hot: true,
         historyApiFallback: true,
+        client: {
+          progress: false,
+        },
         static: {
           directory: path.resolve(__dirname, "./ui/public"),
           publicPath: "/",
         },
+        open: false,
+        onListening: function () {
+          openBrowser(`http://localhost:7001`)
+        },
       } as Configuration,
     },
   }

yarn.lock

@@ -6344,7 +6344,6 @@ __metadata:
     react-router-dom: 6.8.0
     react-select: ^5.5.4
     react-table: ^7.7.0
-    source-map-loader: ^4.0.1
     style-loader: ^3.3.3
     swc-loader: ^0.2.3
     swc-minify-webpack-plugin: ^2.1.1
@@ -26180,7 +26179,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"iconv-lite@npm:0.6.3, iconv-lite@npm:^0.6.2, iconv-lite@npm:^0.6.3":
+"iconv-lite@npm:0.6.3, iconv-lite@npm:^0.6.2":
   version: 0.6.3
   resolution: "iconv-lite@npm:0.6.3"
   dependencies:
@@ -40549,19 +40548,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map-loader@npm:^4.0.1":
-  version: 4.0.1
-  resolution: "source-map-loader@npm:4.0.1"
-  dependencies:
-    abab: ^2.0.6
-    iconv-lite: ^0.6.3
-    source-map-js: ^1.0.2
-  peerDependencies:
-    webpack: ^5.72.1
-  checksum: 880b2c2dd74a71ade45f40bb9de72654eed7e6e6a3c00fb9fb0de28868084f4f00b9376988e43e250fae7c4bb54e85edce32c7651e66388c8bd433e9d6ff4772
-  languageName: node
-  linkType: hard
-
 "source-map-resolve@npm:^0.5.0":
   version: 0.5.3
   resolution: "source-map-resolve@npm:0.5.3"