fix(node): runtime plugin missing vars cause crash (#2471)

Co-authored-by: Zhang Hang <[email protected]>
Co-authored-by: ScriptedAlchemy <[email protected]>

Author: ScriptedAlchemy

.changeset/thirty-days-know.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/node': patch
+---
+
+fix missing variable in runtime plugin when setting to global for script types

.github/workflows/build-and-test.yml

@@ -77,4 +77,4 @@ jobs:
         run: pnpm run app:manifest:dev & echo "done" && npx wait-on tcp:3009 && npx wait-on tcp:3012 && npx nx run-many --target=e2e --projects=3008-webpack-host --parallel=1 && lsof -ti tcp:3008,3009,3010,3011,3012 | xargs kill
 
       - name: E2E Node Federation
-        run: npx nx run-many --target=serve --projects=node-local-remote,node-remote --parallel=3 & echo "done" && sleep 10 && npx nx run-many --target=serve --projects=node-host & npx wait-on tcp:3333 && npx nx run node-host-e2e:test:e2e
+        run: npx nx run-many --target=serve --projects=node-local-remote,node-remote --parallel=3 & echo "done" && sleep 25 && npx nx run-many --target=serve --projects=node-host & sleep 5 && npx wait-on tcp:3333 && npx nx run node-host-e2e:test:e2e

.gitignore

@@ -6,6 +6,7 @@
 /out-tsc
 /build
 /@mf-types
+**/@mf-types/**
 /docs
 /.nx
 # dependencies

apps/3000-home/package.json

@@ -3,32 +3,23 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "acorn": "7.4.1",
     "antd": "4.24.15",
     "buffer": "5.7.1",
-    "chrome-trace-event": "1.0.3",
     "encoding": "0.1.13",
-    "enhanced-resolve": "5.15.0",
     "eslint-scope": "7.2.2",
-    "eventemitter3": "5.0.1",
     "events": "3.3.0",
-    "fast-glob": "3.3.2",
     "js-cookie": "3.0.5",
     "lodash": "4.17.21",
     "next": "14.1.2",
     "node-fetch": "2.7.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "schema-utils": "3.3.0",
-    "semver": "6.3.1",
-    "styled-jsx": "5.1.2",
-    "tapable": "2.2.1",
     "terser-webpack-plugin": "5.3.10",
     "typescript": "5.3.3",
     "upath": "2.0.1",
     "url": "0.11.3",
-    "util": "0.12.5",
-    "webpack-sources": "3.2.3"
+    "util": "0.12.5"
   },
   "devDependencies": {
     "@module-federation/nextjs-mf": "workspace:*",

apps/3001-shop/package.json

@@ -20,7 +20,6 @@
     "react-dom": "18.2.0",
     "schema-utils": "3.3.0",
     "semver": "6.3.1",
-    "styled-jsx": "5.1.2",
     "tapable": "2.2.1",
     "terser-webpack-plugin": "5.3.10",
     "typescript": "5.3.3",

apps/3002-checkout/package.json

@@ -20,7 +20,6 @@
     "react-dom": "18.2.0",
     "schema-utils": "3.3.0",
     "semver": "6.3.1",
-    "styled-jsx": "5.1.2",
     "tapable": "2.2.1",
     "terser-webpack-plugin": "5.3.10",
     "typescript": "5.3.3",

apps/node-host/package.json

@@ -3,6 +3,7 @@
   "private": true,
   "dependencies": {
     "@module-federation/node": "workspace:*",
+    "@module-federation/enhanced": "workspace:*",
     "@module-federation/runtime": "workspace:*"
   }
 }

apps/node-host/webpack.config.js

@@ -1,20 +1,25 @@
 const { composePlugins, withNx } = require('@nx/webpack');
-const { UniversalFederationPlugin } = require('@module-federation/node');
+const { ModuleFederationPlugin } = require('@module-federation/enhanced');
 
 // Nx plugins for webpack.
 module.exports = composePlugins(withNx(), async (config) => {
   // Update the webpack config as needed here.
   // e.g. `config.plugins.push(new MyPlugin())`
   config.cache = false;
   config.devtool = false;
-  config.output.publicPath = 'auto';
+  config.target = 'async-node';
+  config.output.publicPath = '/testing';
+  config.output.chunkFilename = '[id]-[chunkhash].js';
+  config.optimization.chunkIds = 'named';
   await new Promise((r) => setTimeout(r, 400));
   config.module.rules.pop();
   config.plugins.push(
-    new UniversalFederationPlugin({
-      isServer: true,
+    new ModuleFederationPlugin({
       name: 'node_host',
-      runtimePlugins: [require.resolve('./runtimePlugin.ts')],
+      dts: false,
+      runtimePlugins: [
+        require.resolve('@module-federation/node/runtimePlugin'),
+      ],
       remotes: {
         node_local_remote:
           'commonjs ../../node-local-remote/dist/remoteEntry.js',

apps/node-local-remote/package.json

@@ -2,6 +2,7 @@
   "name": "node-local-remote",
   "private": true,
   "dependencies": {
+    "@module-federation/enhanced": "workspace:*",
     "@module-federation/node": "workspace:*"
   }
 }

apps/node-local-remote/webpack.config.js

@@ -2,25 +2,30 @@ const { registerPluginTSTranspiler } = require('nx/src/utils/nx-plugin.js');
 
 registerPluginTSTranspiler();
 const { composePlugins, withNx } = require('@nx/webpack');
-const { UniversalFederationPlugin } = require('@module-federation/node');
+const { ModuleFederationPlugin } = require('@module-federation/enhanced');
 // Nx plugins for webpack.
 module.exports = composePlugins(withNx(), (config) => {
   config.output.publicPath = 'auto';
-  config.target = 'node';
+  config.target = 'async-node';
   config.devtool = false;
   config.cache = false;
-  config.devServer.devMiddleware.writeToDisk = true;
+
+  if (config.devServer) {
+    config.devServer.devMiddleware.writeToDisk = true;
+  }
 
   config.plugins.push(
-    new UniversalFederationPlugin({
-      isServer: true,
+    new ModuleFederationPlugin({
       name: 'node-local-remote',
+      dts: false,
+      runtimePlugins: [
+        require.resolve('@module-federation/node/runtimePlugin'),
+      ],
       library: { type: 'commonjs-module' },
       filename: 'remoteEntry.js',
       exposes: {
         './test': './src/expose.js',
       },
-      experiments: {},
     }),
   );
   return config;