frontend: Add sourcemaps for build

frontend/vite.config.ts

@@ -19,6 +19,7 @@ import checker from 'vite-plugin-checker';
 import svgrPlugin from 'vite-plugin-svgr';
 import { createHtmlPlugin } from 'vite-plugin-html';
 import tsconfigPaths from 'vite-tsconfig-paths';
+import muteWarningsPlugin, { warningsToIgnore } from './vite/muteWarningsPlugin';
 const ENV_PREFIX = 'REACT_APP_';
 
 // https://vitejs.dev/config/
@@ -66,6 +67,7 @@ export default defineConfig(({ mode }) => {
       tsconfigPaths({
         ignoreConfigErrors: true,
       }),
+      muteWarningsPlugin(warningsToIgnore),
     ],
     assetsInclude: ['**/*.md'],
     server: {
@@ -77,6 +79,9 @@ export default defineConfig(({ mode }) => {
     },
     build: {
       outDir: 'build',
+      sourcemap: true,
+       // TODO: we need to look at how Vite/Rollup sets source maps vs CRA.
+      // Can we differentiate between production vs dev build?
     },
   };
 });

frontend/vite/muteWarningsPlugin.ts

@@ -0,0 +1,54 @@
+import { Plugin } from 'vite';
+
+// Fix for "Can't resolve original location of error" error when using source maps to build
+export const warningsToIgnore = [
+    ['SOURCEMAP_ERROR', 'Can\'t resolve original location of error'],
+]
+/**
+ * @see https://github.com/vitejs/vite/issues/15012#issuecomment-1825035992
+ * @param warningsToIgnore 
+ * @returns a Vite plugin that mutes warnings
+ */
+const muteWarningsPlugin = (warningsToIgnore: string[][]): Plugin => {
+    const mutedMessages = new Set()
+    return {
+      name: 'mute-warnings',
+      enforce: 'pre',
+      config: (userConfig) => ({
+        build: {
+          rollupOptions: {
+            onwarn(warning, defaultHandler) {
+              if (warning.code) {
+                const muted = warningsToIgnore.find(
+                  ([code, message]) =>
+                    code == warning.code && warning.message.includes(message),
+                )
+
+                if (muted) {
+                  mutedMessages.add(muted.join())
+                  return
+                }
+              }
+
+              if (userConfig.build?.rollupOptions?.onwarn) {
+                userConfig.build.rollupOptions.onwarn(warning, defaultHandler)
+              } else {
+                defaultHandler(warning)
+              }
+            },
+          },
+        },
+      }),
+      closeBundle() {
+        const diff = warningsToIgnore.filter((x) => !mutedMessages.has(x.join()))
+        if (diff.length > 0) {
+          this.warn(
+            'Some of your muted warnings never appeared during the build process:',
+          )
+          diff.forEach((m) => this.warn(`- ${m.join(': ')}`))
+        }
+      },
+    }
+}
+
+export default muteWarningsPlugin;