fix: webpack import bugs showing warnings on import (#4265)

platform/app/.webpack/webpack.pwa.js

@@ -102,16 +102,17 @@ module.exports = (env, argv) => {
             to: `${DIST_DIR}/app-config.js`,
           },
           // Copy Dicom Microscopy Viewer build files
-          {
-            from: '../../../node_modules/dicom-microscopy-viewer/dist/dynamic-import',
-            to: DIST_DIR,
-            globOptions: {
-              ignore: ['**/*.min.js.map'],
-            },
-            // The dicom-microscopy-viewer is optional, so if it doeesn't get
-            // installed, it shouldn't cause issues.
-            noErrorOnMissing: true,
-          },
+          // This is in pluginCOnfig.json now
+          // {
+          //   from: '../../../node_modules/dicom-microscopy-viewer/dist/dynamic-import',
+          //   to: DIST_DIR,
+          //   globOptions: {
+          //     ignore: ['**/*.min.js.map'],
+          //   },
+          //   // The dicom-microscopy-viewer is optional, so if it doeesn't get
+          //   // installed, it shouldn't cause issues.
+          //   noErrorOnMissing: true,
+          // },
           // Copy dicom-image-loader build files
           {
             from: '../../../node_modules/@cornerstonejs/dicom-image-loader/dist/dynamic-import',

platform/app/.webpack/writePluginImportsFile.js

@@ -66,6 +66,18 @@ function getRuntimeLoadModesExtensions(modules) {
   );
   modules.forEach(module => {
     const packageName = extractName(module);
+    if (!packageName) {
+      return;
+    }
+    if (module.importPath) {
+      dynamicLoad.push(
+        `  if( module==="${packageName}") {`,
+        `    const imported = await window.browserImportFunction('${module.importPath}');`,
+        '    return ' + (module.globalName ? `window["${module.globalName}"];` : `imported["${module.importName || 'default'}"];`),
+        '  }'
+      );
+      return;
+    }
     dynamicLoad.push(
       `  if( module==="${packageName}") {`,
       `    const imported = await import("${packageName}");`,
@@ -73,8 +85,9 @@ function getRuntimeLoadModesExtensions(modules) {
       '  }'
     );
   });
+  // TODO - handle more cases for import than just default
   dynamicLoad.push(
-    '  return (await import(/* webpackIgnore: true */ module)).default;',
+    '  return (await window.browserImportFunction(module)).default;',
     '}\n',
     '// Import a list of items (modules or string names)',
     '// @return a Promise evaluating to a list of modules',
@@ -144,6 +157,7 @@ function writePluginImportsFile(SRC_DIR, DIST_DIR) {
   pluginImportsJsContent += getRuntimeLoadModesExtensions([
     ...pluginConfig.extensions,
     ...pluginConfig.modes,
+    ...pluginConfig.public,
   ]);
 
   fs.writeFileSync(`${SRC_DIR}/pluginImports.js`, pluginImportsJsContent, { flag: 'w+' }, err => {

platform/app/pluginConfig.json

@@ -88,6 +88,12 @@
   "public": [
     {
       "directory": "./platform/public"
+    },
+    {
+      "packageName": "dicom-microscopy-viewer",
+      "importPath": "/dicom-microscopy-viewer/dicomMicroscopyViewer.min.js",
+      "globalName": "dicomMicroscopyViewer",
+      "directory": "./node_modules/dicom-microscopy-viewer/dist/dynamic-import"
     }
   ]
 }

platform/app/public/html-templates/index.html

@@ -210,6 +210,12 @@
       rel="preload"
       as="style"
     />
+    <script>
+      function browserImportFunction(moduleId) {
+        return import(moduleId);
+      }
+    </script>
+
 
     <!-- EXTENSIONS -->
     <!-- <script type="text/javascript" src="path/to/some-extension.js"></script>

platform/app/src/appInit.js

@@ -24,7 +24,7 @@ import {
   // utils,
 } from '@ohif/core';
 
-import loadModules from './pluginImports';
+import loadModules, { loadModule as peerImport } from './pluginImports';
 
 /**
  * @param {object|func} appConfigOrFunc - application configuration, or a function that returns application configuration
@@ -42,9 +42,11 @@ async function appInit(appConfigOrFunc, defaultExtensions, defaultModes) {
 
   const appConfig = {
     ...(typeof appConfigOrFunc === 'function'
-      ? await appConfigOrFunc({ servicesManager, loadModules })
+      ? await appConfigOrFunc({ servicesManager, peerImport })
       : appConfigOrFunc),
   };
+  // Default the peer import function
+  appConfig.peerImport ||= peerImport;
 
   const extensionManager = new ExtensionManager({
     commandsManager,