Try to fix problems with seperate chunks

Signed-off-by: Sebastian Malton <sebastian@malton.name>

packages/core/package.json

@@ -44,7 +44,8 @@
     "src/renderer/template.html",
     "templates/**/*",
     "types/*",
-    "tsconfig.json"
+    "tsconfig.json",
+    "src/renderer/**/*.svg"
   ],
   "copyright": "© 2023 OpenLens Authors",
   "license": "MIT",

packages/core/src/renderer/bootstrap.tsx

@@ -13,12 +13,12 @@ import type { DiContainer } from "@ogre-tools/injectable";
 import extensionLoaderInjectable from "../extensions/extension-loader/extension-loader.injectable";
 import extensionDiscoveryInjectable from "../extensions/extension-discovery/extension-discovery.injectable";
 import extensionInstallationStateStoreInjectable from "../extensions/extension-installation-state-store/extension-installation-state-store.injectable";
-import initRootFrameInjectable from "./frames/root-frame/init-root-frame.injectable";
-import initClusterFrameInjectable from "./frames/cluster-frame/init-cluster-frame/init-cluster-frame.injectable";
 import { Router } from "react-router";
 import historyInjectable from "./navigation/history.injectable";
 import assert from "assert";
 import startFrameInjectable from "./start-frame/start-frame.injectable";
+import rootComponentInjectable from "./bootstrap/root-component.injectable";
+import initializeAppInjectable from "./bootstrap/initialize-app.injectable";
 
 export async function bootstrap(di: DiContainer) {
   const startFrame = di.inject(startFrameInjectable);
@@ -41,17 +41,8 @@ export async function bootstrap(di: DiContainer) {
 
   extensionInstallationStateStore.bindIpcListeners();
 
-  let App;
+  const App = di.inject(rootComponentInjectable);
-  let initializeApp;
+  const initializeApp = di.inject(initializeAppInjectable);
-
-  // TODO: Introduce proper architectural boundaries between root and cluster iframes
-  if (process.isMainFrame) {
-    initializeApp = di.inject(initRootFrameInjectable);
-    App = (await import("./frames/root-frame/root-frame")).RootFrame;
-  } else {
-    initializeApp = di.inject(initClusterFrameInjectable);
-    App = (await import("./frames/cluster-frame/cluster-frame")).ClusterFrame;
-  }
 
   try {
     await initializeApp(() => unmountComponentAtNode(rootElem));

packages/core/src/renderer/bootstrap/initialize-app.injectable.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { initializeAppInjectionToken } from "./tokens";
+
+const initializeAppInjectable = getInjectable({
+  id: "initialize-app",
+  instantiate: (di) => {
+    const options = di.injectMany(initializeAppInjectionToken);
+
+    if (options.length === 0) {
+      throw new Error("No intializeApp registered");
+    }
+
+    const intializeApp = options.find(opt => opt.isActive);
+    const howManyActive = options.reduce((count, cur) => count + +cur.isActive, 0);
+
+    if (!intializeApp) {
+      throw new Error("No initializeApp registrations are active");
+    }
+
+    if (howManyActive > 1) {
+      throw new Error("Too many initiazlizeApp registrations are active");
+    }
+
+    return intializeApp.init;
+  },
+});
+
+export default initializeAppInjectable;

packages/core/src/renderer/bootstrap/root-component.injectable.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { rootComponentInjectionToken } from "./tokens";
+
+const rootComponentInjectable = getInjectable({
+  id: "root-component",
+  instantiate: (di) => {
+    const options = di.injectMany(rootComponentInjectionToken);
+
+    if (options.length === 0) {
+      throw new Error("No intializeApp registered");
+    }
+
+    const intializeApp = options.find(opt => opt.isActive);
+    const howManyActive = options.reduce((count, cur) => count + +cur.isActive, 0);
+
+    if (!intializeApp) {
+      throw new Error("No initializeApp registrations are active");
+    }
+
+    if (howManyActive > 1) {
+      throw new Error("Too many initiazlizeApp registrations are active");
+    }
+
+    return intializeApp.Component;
+  },
+});
+
+export default rootComponentInjectable;

packages/core/src/renderer/bootstrap/tokens.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { getInjectionToken } from "@ogre-tools/injectable";
+import type { FunctionComponent } from "react";
+
+export interface InitializeApp {
+  init: (unmountRoot: () => void) => Promise<void>;
+  isActive: boolean;
+}
+
+export const initializeAppInjectionToken = getInjectionToken<InitializeApp>({
+  id: "initialize-app-token",
+});
+
+export interface RootComponent {
+  Component: FunctionComponent<{}>;
+  isActive: boolean;
+}
+
+export const rootComponentInjectionToken = getInjectionToken<RootComponent>({
+  id: "root-component-token",
+});

packages/core/src/renderer/frames/cluster-frame/init-cluster-frame/init-cluster-frame.injectable.ts

@@ -7,30 +7,28 @@ import { initClusterFrame } from "./init-cluster-frame";
 import catalogEntityRegistryInjectable from "../../../api/catalog/entity/registry.injectable";
 import frameRoutingIdInjectable from "./frame-routing-id/frame-routing-id.injectable";
 import hostedClusterInjectable from "../../../cluster-frame-context/hosted-cluster.injectable";
-import assert from "assert";
 import emitAppEventInjectable from "../../../../common/app-event-bus/emit-event.injectable";
 import loadExtensionsInjectable from "../../load-extensions.injectable";
 import loggerInjectable from "../../../../common/logger.injectable";
 import showErrorNotificationInjectable from "../../../components/notifications/show-error-notification.injectable";
+import { initializeAppInjectionToken } from "../../../bootstrap/tokens";
 
 const initClusterFrameInjectable = getInjectable({
   id: "init-cluster-frame",
 
-  instantiate: (di) => {
+  instantiate: (di) => ({
-    const hostedCluster = di.inject(hostedClusterInjectable);
+    init: initClusterFrame({
-
+      hostedCluster: di.inject(hostedClusterInjectable),
-    assert(hostedCluster, "This can only be injected within a cluster frame");
-
-    return initClusterFrame({
-      hostedCluster,
       loadExtensions: di.inject(loadExtensionsInjectable),
       catalogEntityRegistry: di.inject(catalogEntityRegistryInjectable),
       frameRoutingId: di.inject(frameRoutingIdInjectable),
       emitAppEvent: di.inject(emitAppEventInjectable),
       logger: di.inject(loggerInjectable),
       showErrorNotification: di.inject(showErrorNotificationInjectable),
-    });
+    }),
-  },
+    isActive: !process.isMainFrame,
+  }),
+  injectionToken: initializeAppInjectionToken,
 });
 
 export default initClusterFrameInjectable;

packages/core/src/renderer/frames/cluster-frame/init-cluster-frame/init-cluster-frame.ts

@@ -9,9 +9,10 @@ import { when } from "mobx";
 import { requestSetClusterFrameId } from "../../../ipc";
 import type { EmitAppEvent } from "../../../../common/app-event-bus/emit-event.injectable";
 import type { Logger } from "../../../../common/logger";
+import assert from "assert";
 
 interface Dependencies {
-  hostedCluster: Cluster;
+  hostedCluster: Cluster | undefined;
   loadExtensions: () => void;
   catalogEntityRegistry: CatalogEntityRegistry;
   frameRoutingId: number;
@@ -32,6 +33,8 @@ export const initClusterFrame = ({
   showErrorNotification,
 }: Dependencies) =>
   async (unmountRoot: () => void) => {
+    assert(hostedCluster, "This can only be injected within a cluster frame");
+
     // TODO: Make catalogEntityRegistry already initialized when passed as dependency
     catalogEntityRegistry.init();
 

packages/core/src/renderer/frames/cluster-frame/root-component.injectable.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { rootComponentInjectionToken } from "../../bootstrap/tokens";
+import { ClusterFrame } from "./cluster-frame";
+
+const clusterFrameRootComponentInjectable = getInjectable({
+  id: "cluster-frame-root-component",
+  instantiate: () => ({
+    Component: ClusterFrame,
+    isActive: !process.isMainFrame,
+  }),
+  injectionToken: rootComponentInjectionToken,
+});
+
+export default clusterFrameRootComponentInjectable;

packages/core/src/renderer/frames/root-frame/init-root-frame.injectable.ts

@@ -13,19 +13,20 @@ import loggerInjectable from "../../../common/logger.injectable";
 import { delay } from "../../../common/utils";
 import { broadcastMessage } from "../../../common/ipc";
 import { bundledExtensionsLoaded } from "../../../common/ipc/extension-handling";
+import { initializeAppInjectionToken } from "../../bootstrap/tokens";
 
 const initRootFrameInjectable = getInjectable({
   id: "init-root-frame",
-  instantiate: (di) => {
+  instantiate: (di) => ({
-    const loadExtensions = di.inject(loadExtensionsInjectable);
+    init: async (unmountRoot: () => void) => {
-    const registerIpcListeners = di.inject(registerIpcListenersInjectable);
+      const loadExtensions = di.inject(loadExtensionsInjectable);
-    const ipcRenderer = di.inject(ipcRendererInjectable);
+      const registerIpcListeners = di.inject(registerIpcListenersInjectable);
-    const bindProtocolAddRouteHandlers = di.inject(bindProtocolAddRouteHandlersInjectable);
+      const ipcRenderer = di.inject(ipcRendererInjectable);
-    const lensProtocolRouterRenderer = di.inject(lensProtocolRouterRendererInjectable);
+      const bindProtocolAddRouteHandlers = di.inject(bindProtocolAddRouteHandlersInjectable);
-    const catalogEntityRegistry = di.inject(catalogEntityRegistryInjectable);
+      const lensProtocolRouterRenderer = di.inject(lensProtocolRouterRendererInjectable);
-    const logger = di.inject(loggerInjectable);
+      const catalogEntityRegistry = di.inject(catalogEntityRegistryInjectable);
+      const logger = di.inject(loggerInjectable);
 
-    return async (unmountRoot: () => void) => {
       catalogEntityRegistry.init();
 
       try {
@@ -49,8 +50,7 @@ const initRootFrameInjectable = getInjectable({
 
       bindProtocolAddRouteHandlers();
 
-      window.addEventListener("offline", () =>
+      window.addEventListener("offline", () => broadcastMessage("network:offline"),
-        broadcastMessage("network:offline"),
       );
 
       window.addEventListener("online", () => broadcastMessage("network:online"));
@@ -62,8 +62,10 @@ const initRootFrameInjectable = getInjectable({
 
         unmountRoot();
       });
-    };
+    },
-  },
+    isActive: process.isMainFrame,
+  }),
+  injectionToken: initializeAppInjectionToken,
 });
 
 export default initRootFrameInjectable;

packages/core/src/renderer/frames/root-frame/root-component.injectable.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { rootComponentInjectionToken } from "../../bootstrap/tokens";
+import { RootFrame } from "./root-frame";
+
+const rootFrameRootComponentInjectable = getInjectable({
+  id: "root-frame-root-component",
+  instantiate: () => ({
+    Component: RootFrame,
+    isActive: process.isMainFrame,
+  }),
+  injectionToken: rootComponentInjectionToken,
+});
+
+export default rootFrameRootComponentInjectable;

packages/core/webpack/common.ts

@@ -6,32 +6,27 @@
 import type webpack from "webpack";
 import path from "path";
 import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin";
-import webpackLensMain from "./main";
+import { webpackLensMain } from "./main";
 import { buildDir } from "./vars";
 
-const webpackLensCommon = (): webpack.Configuration => {
+export const webpackLensCommon = (): webpack.Configuration => ({
-  const mainConfig = webpackLensMain();
+  ...webpackLensMain(),
-
+  name: "lens-app-common",
-  return {
+  entry: {
-    ...mainConfig,
+    common: path.resolve(__dirname, "..", "src", "common", "library.ts"),
-    name: "lens-app-common",
+  },
-    entry: {
+  dependencies: [],
-      common: path.resolve(__dirname, "..", "src", "common", "library.ts"),
+  output: {
+    publicPath: "",
+    library: {
+      type: "commonjs2",
     },
-    output: {
+    path: path.resolve(buildDir, "library"),
-      publicPath: "",
+  },
-      library: {
+  optimization: {
-        type: "commonjs2",
+    minimize: false,
-      },
+  },
-      path: path.resolve(buildDir, "library"),
+  plugins: [
-    },
+    new ForkTsCheckerPlugin({}),
-    optimization: {
+  ],
-      minimize: false,
+});
-    },
-    plugins: [
-      new ForkTsCheckerPlugin({}),
-    ],
-  };
-};
-
-export default webpackLensCommon;

packages/core/webpack/library-bundle.ts

@@ -3,8 +3,8 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import webpackLensCommon from "./common";
+import { webpackLensCommon } from "./common";
-import webpackLensMain from "./main";
+import { webpackLensMain } from "./main";
 import { webpackLensRenderer } from "./renderer";
 
 const config = [

packages/core/webpack/main.ts

@@ -12,76 +12,81 @@ import { DefinePlugin } from "webpack";
 import { buildDir, isDevelopment } from "./vars";
 import { platform } from "process";
 
-const webpackLensMain = (): webpack.Configuration => {
+export const webpackLensMain = (): webpack.Configuration => ({
-  return {
+  name: "lens-app-main",
-    name: "lens-app-main",
+  context: __dirname,
-    context: __dirname,
+  target: "electron-main",
-    target: "electron-main",
+  mode: isDevelopment ? "development" : "production",
-    mode: isDevelopment ? "development" : "production",
+  devtool: isDevelopment ? "cheap-module-source-map" : "source-map",
-    devtool: isDevelopment ? "cheap-module-source-map" : "source-map",
+  cache: isDevelopment ? { type: "filesystem" } : false,
-    cache: isDevelopment ? { type: "filesystem" } : false,
+  entry: {
-    entry: {
+    common: {
-      main: path.resolve(__dirname, "..", "src", "main", "library.ts"),
+      import: path.resolve(__dirname, "..", "static", "build", "library", "common.js"),
     },
-    output: {
+    main: {
-      library: {
+      import: path.resolve(__dirname, "..", "src", "main", "library.ts"),
-        type: "commonjs2",
+      dependOn: "common",
+    },
+  },
+  dependencies: [
+    "lens-app-common",
+  ],
+  output: {
+    library: {
+      type: "commonjs2",
+    },
+    path: path.resolve(buildDir, "library"),
+  },
+  optimization: {
+    minimize: false,
+  },
+  resolve: {
+    extensions: [".json", ".js", ".ts"],
+  },
+  externals: [
+    nodeExternals(),
+  ],
+  module: {
+    parser: {
+      javascript: {
+        commonjsMagicComments: true,
       },
-      path: path.resolve(buildDir, "library"),
     },
-    optimization: {
+    rules: [
-      minimize: false,
+      {
-    },
+        test: /\.node$/,
-    resolve: {
+        use: "node-loader",
-      extensions: [".json", ".js", ".ts"],
-    },
-    externals: [
-      nodeExternals(),
-    ],
-    module: {
-      parser: {
-        javascript: {
-          commonjsMagicComments: true,
-        },
       },
-      rules: [
+      {
-        {
+        test: /\.ts$/,
-          test: /\.node$/,
+        exclude: /node_modules/,
-          use: "node-loader",
+        use: {
-        },
+          loader: "ts-loader",
-        {
+          options: {
-          test: /\.ts$/,
+            transpileOnly: true,
-          exclude: /node_modules/,
-          use: {
-            loader: "ts-loader",
-            options: {
-              transpileOnly: true,
-              compilerOptions: {
-                sourceMap: false,
-              },
-            },
-          },
-        },
-        ...iconsAndImagesWebpackRules(),
-      ],
-    },
-    plugins: [
-      new DefinePlugin({
-        CONTEXT_MATCHER_FOR_NON_FEATURES: `/\\.injectable(\\.${platform})?\\.tsx?$/`,
-        CONTEXT_MATCHER_FOR_FEATURES: `/\\/(main|common)\\/.+\\.injectable(\\.${platform})?\\.tsx?$/`,
-      }),
-      new ForkTsCheckerPlugin({
-        typescript: {
-          mode: "write-dts",
-          configOverwrite: {
             compilerOptions: {
-              declaration: true,
+              sourceMap: false,
             },
           },
         },
-      }),
+      },
+      ...iconsAndImagesWebpackRules(),
     ],
-  };
+  },
-};
+  plugins: [
-
+    new DefinePlugin({
-export default webpackLensMain;
+      CONTEXT_MATCHER_FOR_NON_FEATURES: `/\\.injectable(\\.${platform})?\\.tsx?$/`,
+      CONTEXT_MATCHER_FOR_FEATURES: `/\\/(main|common)\\/.+\\.injectable(\\.${platform})?\\.tsx?$/`,
+    }),
+    new ForkTsCheckerPlugin({
+      typescript: {
+        mode: "write-dts",
+        configOverwrite: {
+          compilerOptions: {
+            declaration: true,
+          },
+        },
+      },
+    }),
+  ],
+});

packages/core/webpack/renderer.ts

@@ -14,97 +14,104 @@ import nodeExternals from "webpack-node-externals";
 import { isDevelopment, buildDir, sassCommonVars } from "./vars";
 import { platform } from "process";
 
-export function webpackLensRenderer(): webpack.Configuration {
+export const webpackLensRenderer = (): webpack.Configuration => ({
-  return {
+  target: "electron-renderer",
-    target: "electron-renderer",
+  name: "lens-app-renderer",
-    name: "lens-app-renderer",
+  mode: isDevelopment ? "development" : "production",
-    mode: isDevelopment ? "development" : "production",
+  // https://webpack.js.org/configuration/devtool/ (see description of each option)
-    // https://webpack.js.org/configuration/devtool/ (see description of each option)
+  devtool: isDevelopment ? "cheap-module-source-map" : "source-map",
-    devtool: isDevelopment ? "cheap-module-source-map" : "source-map",
+  cache: isDevelopment ? { type: "filesystem" } : false,
-    cache: isDevelopment ? { type: "filesystem" } : false,
+  entry: {
-    entry: {
+    common: {
-      renderer: path.resolve(__dirname, "..", "src", "renderer", "library.ts"),
+      import: path.resolve(__dirname, "..", "static", "build", "library", "common.js"),
     },
-    output: {
+    renderer: {
-      library: {
+      import: path.resolve(__dirname, "..", "src", "renderer", "library.ts"),
-        type: "commonjs2",
+      dependOn: "common",
-      },
-      path: path.resolve(buildDir, "library"),
     },
-    watchOptions: {
+  },
-      ignored: /node_modules/, // https://webpack.js.org/configuration/watch/
+  dependencies: [
+    "lens-app-common",
+  ],
+  output: {
+    library: {
+      type: "commonjs2",
     },
-    ignoreWarnings: [
+    path: path.resolve(buildDir, "library"),
-      /Critical dependency: the request of a dependency is an expression/,
+  },
-      /require.extensions is not supported by webpack./, // handlebars
+  watchOptions: {
-      /\[ReactRefreshPlugin] .*?HMR.*? is not enabled/, // enabled in webpack.dev-server
+    ignored: /node_modules/, // https://webpack.js.org/configuration/watch/
+  },
+  ignoreWarnings: [
+    /Critical dependency: the request of a dependency is an expression/,
+    /require.extensions is not supported by webpack./,
+    /\[ReactRefreshPlugin] .*?HMR.*? is not enabled/, // enabled in webpack.dev-server
+  ],
+  resolve: {
+    extensions: [
+      ".js", ".jsx", ".json",
+      ".ts", ".tsx",
     ],
-    resolve: {
+  },
-      extensions: [
+  externals: [
-        ".js", ".jsx", ".json",
+    nodeExternals(),
-        ".ts", ".tsx",
+  ],
-      ],
+  optimization: {
-    },
+    minimize: false,
-    externals: [
+  },
-      nodeExternals(),
+  module: {
-    ],
+    parser: {
-    optimization: {
+      javascript: {
-      minimize: false,
+        commonjsMagicComments: true,
-    },
-    module: {
-      parser: {
-        javascript: {
-          commonjsMagicComments: true,
-        },
       },
-      rules: [
+    },
-        {
+    rules: [
-          test: /\.node$/,
+      {
-          use: "node-loader",
+        test: /\.node$/,
-        },
+        use: "node-loader",
-        {
+      },
-          test: /\.tsx?$/,
+      {
-          exclude: /node_modules/,
+        test: /\.tsx?$/,
-          use: {
+        exclude: /node_modules/,
-            loader: "ts-loader",
+        use: {
-            options: {
+          loader: "ts-loader",
-              transpileOnly: true,
+          options: {
-              compilerOptions: {
+            transpileOnly: true,
-                declaration: true,
+            compilerOptions: {
-                sourceMap: false,
+              declaration: true,
-              },
+              sourceMap: false,
             },
           },
         },
-        cssModulesWebpackRule(),
+      },
-        ...iconsAndImagesWebpackRules(),
+      cssModulesWebpackRule(),
-        ...fontsLoaderWebpackRules(),
+      ...iconsAndImagesWebpackRules(),
-      ],
+      ...fontsLoaderWebpackRules(),
-    },
-
-    plugins: [
-      new DefinePlugin({
-        CONTEXT_MATCHER_FOR_NON_FEATURES: `/\\.injectable(\\.${platform})?\\.tsx?$/`,
-        CONTEXT_MATCHER_FOR_FEATURES: `/\\/(renderer|common)\\/.+\\.injectable(\\.${platform})?\\.tsx?$/`,
-      }),
-      new ForkTsCheckerPlugin({}),
-
-      new CircularDependencyPlugin({
-        cwd: __dirname,
-        exclude: /node_modules/,
-        failOnError: true,
-      }) as unknown as WebpackPluginInstance,
-
-      new MiniCssExtractPlugin({
-        filename: "[name].css",
-      }),
-
-      new optimize.LimitChunkCountPlugin({
-        maxChunks: 1,
-      }),
     ],
-  };
+  },
-}
+
+  plugins: [
+    new DefinePlugin({
+      CONTEXT_MATCHER_FOR_NON_FEATURES: `/\\.injectable(\\.${platform})?\\.tsx?$/`,
+      CONTEXT_MATCHER_FOR_FEATURES: `/\\/(renderer|common)\\/.+\\.injectable(\\.${platform})?\\.tsx?$/`,
+    }),
+    new ForkTsCheckerPlugin({}),
+
+    new CircularDependencyPlugin({
+      cwd: __dirname,
+      exclude: /node_modules/,
+      failOnError: true,
+    }) as unknown as WebpackPluginInstance,
+
+    new MiniCssExtractPlugin({
+      filename: "[name].css",
+    }),
+
+    new optimize.LimitChunkCountPlugin({
+      maxChunks: 1,
+    }),
+  ],
+});
 
 /**
  * Import icons and image files.

packages/open-lens/package.json

@@ -258,6 +258,7 @@
     "react-select": "^5.7.0",
     "rimraf": "^4.1.2",
     "run-script-os": "^1.1.6",
+    "source-map-loader": "^4.0.1",
     "style-loader": "^3.3.1",
     "tailwindcss": "^3.2.4",
     "ts-loader": "^9.4.2",

packages/open-lens/webpack/renderer.ts

@@ -11,7 +11,7 @@
  import MonacoWebpackPlugin from "monaco-editor-webpack-plugin";
  import CircularDependencyPlugin from "circular-dependency-plugin";
  import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
- import type { WebpackPluginInstance } from "webpack";
+ import { WebpackPluginInstance } from "webpack";
  import { DefinePlugin } from "webpack";
  import { assetsFolderName, isDevelopment, rendererDir, buildDir, htmlTemplate, publicPath, sassCommonVars } from "./vars";
  import { platform } from "process";
@@ -42,6 +42,7 @@
     /Critical dependency: the request of a dependency is an expression/,
     /require.extensions is not supported by webpack./, // handlebars
     /\[ReactRefreshPlugin] .*?HMR.*? is not enabled/, // enabled in webpack.dev-server
+    /Failed to parse source map/, // from the source-map-loader
   ],
   resolve: {
     extensions: [
@@ -68,9 +69,18 @@
         use: "node-loader",
       },
       {
-      test: /\.tsx?$/,
+        test: /\.tsx?$/,
-      loader: "ts-loader",
+        loader: "ts-loader",
-      options: {},
+        options: {},
+      },
+      {
+        test: /\.js$/,
+        enforce: "pre",
+        use: [
+          {
+            loader: "source-map-loader",
+          }
+        ],
       },
       cssModulesWebpackRule(),
       ...iconsAndImagesWebpackRules(),

packages/open-lens/yarn.lock

@@ -9815,6 +9815,15 @@ source-list-map@^2.0.1:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
+source-map-loader@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/source-map-loader/-/source-map-loader-4.0.1.tgz#72f00d05f5d1f90f80974eda781cbd7107c125f2"
+  integrity sha512-oqXpzDIByKONVY8g1NUPOTQhe0UTU5bWUl32GSkqK2LjJj0HmwTMVKxcUip0RgAYhY1mqgOxjbQM48a0mmeNfA==
+  dependencies:
+    abab "^2.0.6"
+    iconv-lite "^0.6.3"
+    source-map-js "^1.0.2"
+
 source-map-support@0.5.13:
   version "0.5.13"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.13.tgz#31b24a9c2e73c2de85066c0feb7d44767ed52932"