fix(runtime): add define constant to help downgrade non-esm project (#3261)

Author: 2heal1

.changeset/dirty-bikes-report.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/runtime': patch
+---
+
+fix(runtime): add define constant to help downgrade non-esm project

.changeset/tasty-guests-shop.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/modern-js': patch
+---
+
+fix(modern-js-plugin): only export esm mfRuntimePlugin

packages/modernjs/package.json

@@ -35,6 +35,21 @@
       "import": "./dist/esm/cli/ssrPlugin.js",
       "require": "./dist/cjs/cli/ssrPlugin.js",
       "types": "./dist/types/cli/ssrPlugin.d.ts"
+    },
+    "./shared-strategy": {
+      "import": "./dist/esm/cli/mfRuntimePlugins/shared-strategy.js",
+      "require": "./dist/esm/cli/mfRuntimePlugins/shared-strategy.js",
+      "types": "./dist/types/cli/mfRuntimePlugins/shared-strategy.d.ts"
+    },
+    "./resolve-entry-ipv4": {
+      "import": "./dist/esm/cli/mfRuntimePlugins/resolve-entry-ipv4.js",
+      "require": "./dist/esm/cli/mfRuntimePlugins/resolve-entry-ipv4.js",
+      "types": "./dist/types/cli/mfRuntimePlugins/resolve-entry-ipv4.d.ts"
+    },
+    "./inject-node-fetch": {
+      "import": "./dist/esm/cli/mfRuntimePlugins/inject-node-fetch.js",
+      "require": "./dist/esm/cli/mfRuntimePlugins/inject-node-fetch.js",
+      "types": "./dist/types/cli/mfRuntimePlugins/inject-node-fetch.d.ts"
     }
   },
   "typesVersions": {
@@ -50,6 +65,15 @@
       ],
       "ssr-plugin": [
         "./dist/types/cli/ssrPlugin.d.ts"
+      ],
+      "shared-strategy": [
+        "./dist/types/cli/mfRuntimePlugins/shared-strategy.d.ts"
+      ],
+      "resolve-entry-ipv4": [
+        "./dist/types/cli/mfRuntimePlugins/resolve-entry-ipv4.d.ts"
+      ],
+      "inject-node-fetch": [
+        "./dist/types/cli/mfRuntimePlugins/inject-node-fetch.d.ts"
       ]
     }
   },

packages/modernjs/src/cli/utils.spec.ts

@@ -39,9 +39,9 @@ describe('patchMFConfig', async () => {
       },
       remoteType: 'script',
       runtimePlugins: [
-        path.resolve(__dirname, './mfRuntimePlugins/shared-strategy.js'),
+        require.resolve('@module-federation/modern-js/shared-strategy'),
         require.resolve('@module-federation/node/runtimePlugin'),
-        path.resolve(__dirname, './mfRuntimePlugins/inject-node-fetch.js'),
+        require.resolve('@module-federation/modern-js/inject-node-fetch'),
       ],
       shared: {
         react: {
@@ -69,7 +69,7 @@ describe('patchMFConfig', async () => {
       },
       remoteType: 'script',
       runtimePlugins: [
-        path.resolve(__dirname, './mfRuntimePlugins/shared-strategy.js'),
+        require.resolve('@module-federation/modern-js/shared-strategy'),
       ],
       shared: {
         react: {

packages/modernjs/src/cli/utils.ts

@@ -146,13 +146,13 @@ export const patchMFConfig = (
   patchDTSConfig(mfConfig, isServer);
 
   injectRuntimePlugins(
-    path.resolve(__dirname, './mfRuntimePlugins/shared-strategy.js'),
+    require.resolve('@module-federation/modern-js/shared-strategy'),
     runtimePlugins,
   );
 
   if (isDev) {
     injectRuntimePlugins(
-      path.resolve(__dirname, './mfRuntimePlugins/resolve-entry-ipv4.js'),
+      require.resolve('@module-federation/modern-js/resolve-entry-ipv4'),
       runtimePlugins,
     );
   }
@@ -172,7 +172,7 @@ export const patchMFConfig = (
     }
 
     injectRuntimePlugins(
-      path.resolve(__dirname, './mfRuntimePlugins/inject-node-fetch.js'),
+      require.resolve('@module-federation/modern-js/inject-node-fetch'),
       runtimePlugins,
     );
 

packages/runtime/global.d.ts

@@ -2,3 +2,4 @@ declare const __VERSION__: string;
 declare const FEDERATION_DEBUG: string;
 declare const FEDERATION_BUILD_IDENTIFIER: string | undefined;
 declare const __RELEASE_NUMBER__: number;
+declare const FEDERATION_ALLOW_NEW_FUNCTION: string | undefined;

packages/runtime/src/utils/load.ts

@@ -25,9 +25,14 @@ async function loadEsmEntry({
   return new Promise<RemoteEntryExports>((resolve, reject) => {
     try {
       if (!remoteEntryExports) {
-        import(/* webpackIgnore: true */ /* @vite-ignore */ entry)
-          .then(resolve)
-          .catch(reject);
+        if (typeof FEDERATION_ALLOW_NEW_FUNCTION !== 'undefined') {
+          new Function(
+            'callbacks',
+            `import("${entry}").then(callbacks[0]).catch(callbacks[1])`,
+          )([resolve, reject]);
+        } else {
+          import(/* webpackIgnore: true */ /* @vite-ignore */ entry).then(resolve).catch(reject);
+        }
       } else {
         resolve(remoteEntryExports);
       }
@@ -223,7 +228,6 @@ export async function getRemoteEntry({
 
   if (!globalLoading[uniqueKey]) {
     const loadEntryHook = origin.remoteHandler.hooks.lifecycle.loadEntry;
-    const createScriptHook = origin.loaderHook.lifecycle.createScript;
     const loaderHook = origin.loaderHook;
 
     globalLoading[uniqueKey] = loadEntryHook