fix: resolve E2E test failures on Node 22+ (import attributes, port conflicts, server readiness)

packages/examples/basic-host-remote/README.md

@@ -7,8 +7,8 @@ This repository is to showcase examples of how Module Federation can be used in
 1. Clone [originjs/vite-plugin-federation](https://github.com/originjs/vite-plugin-federation) if you haven't already.
 1. At the repository root, install dependencies (`pnpm install`) and build (`pnpm build`).
 1. Go to this example folder: `cd packages\examples\basic-host-remote`
-1. Run `pnpm install`, `pnpm build` and `pnpm serve` . This will build and serve both `host` and `remote` on ports 5000, 5001 respectively:
-    - HOST (rollup-host): [localhost:5000](http://localhost:5000/)
-    - REMOTE (rollup-remote): [localhost:5001](http://localhost:5001/)
+1. Run `pnpm install`, `pnpm build` and `pnpm serve` . This will build and serve both `host` and `remote` on ports 5030, 5031 respectively:
+    - HOST (rollup-host): [localhost:5030](http://localhost:5030/)
+    - REMOTE (rollup-remote): [localhost:5031](http://localhost:5031/)
 
 `CTRL + C` can only stop the host server. You can run `pnpm stop` to stop all services.

packages/examples/basic-host-remote/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "build": "pnpm --parallel --filter \"./**\" build",
     "serve": "pnpm --parallel --filter \"./**\" serve",
-    "stop": "kill-port --port 5000,5001"
+    "stop": "kill-port --port 5030,5031"
   },
   "license": "MulanPSL-2.0",
   "devDependencies": {

packages/examples/basic-host-remote/rollup-host/package.json

@@ -5,7 +5,7 @@
   "private": true,
   "scripts": {
     "build": "rollup -c",
-    "serve": "http-server . -p 5000 --cors='*'"
+    "serve": "http-server . -p 5030 --cors='*'"
   },
   "devDependencies": {
     "rollup": "^3.9.1"

packages/examples/basic-host-remote/rollup-host/rollup.config.mjs

@@ -1,14 +1,14 @@
 import federation from "@originjs/vite-plugin-federation";
 
-import pkg from "./package.json" assert { type: "json" };
+import pkg from "./package.json" with { type: "json" };
 
 export default {
   input: "src/index.js",
   preserveEntrySignatures: false,
   plugins: [
     federation({
       remotes: {
-        remote_app: "http://localhost:5001/remoteEntry.js",
+        remote_app: "http://localhost:5031/remoteEntry.js",
       }
     }),
   ],

packages/examples/basic-host-remote/rollup-remote/package.json

@@ -5,7 +5,7 @@
   "private": true,
   "scripts": {
     "build": "rollup -c",
-    "serve": "http-server ./dist -p 5001 --cors='*'"
+    "serve": "http-server ./dist -p 5031 --cors='*'"
   },
   "devDependencies": {
     "rollup": "^3.9.1"

packages/examples/simple-react-esm/host-esm/rollup.config.mjs

@@ -2,7 +2,7 @@ import babel from '@rollup/plugin-babel'
 import commonjs from '@rollup/plugin-commonjs'
 import resolve from '@rollup/plugin-node-resolve'
 import federation from '@originjs/vite-plugin-federation'
-import pkg from './package.json' assert { type: 'json' }
+import pkg from './package.json' with { type: 'json' }
 import replace from '@rollup/plugin-replace'
 
 export default {

packages/examples/simple-react-esm/remote-esm/rollup.config.mjs

@@ -3,7 +3,7 @@ import commonjs from '@rollup/plugin-commonjs'
 import resolve from '@rollup/plugin-node-resolve'
 import federation from '@originjs/vite-plugin-federation'
 import replace from '@rollup/plugin-replace'
-import pkg from './package.json' assert { type: 'json' }
+import pkg from './package.json' with { type: 'json' }
 
 export default {
   input: 'src/index.js',

packages/examples/simple-react-systemjs/README.md

@@ -4,9 +4,9 @@ This example demos consumption of federated modules from a rollup bundle. `remot
 
 ## Running Demo
 
-First, `cd packages/examples/simple-react`, then run `pnpm build` and `pnpm serve`. This will build and serve both `host` and `remote` on ports 5000, 5001 respectively.
+First, `cd packages/examples/simple-react`, then run `pnpm build` and `pnpm serve`. This will build and serve both `host` and `remote` on ports 5020, 5021 respectively.
 
-- HOST (host): [localhost:5000](http://localhost:5000/)
-- REMOTE (remote): [localhost:5001](http://localhost:5001/)
+- HOST (host): [localhost:5020](http://localhost:5020/)
+- REMOTE (remote): [localhost:5021](http://localhost:5021/)
 
 `CTRL + C` can only stop the host server. You can run `pnpm stop` to stop all services.

packages/examples/simple-react-systemjs/host-systemjs/package.json

@@ -5,7 +5,7 @@
   "license": "MulanPSL-2.0",
   "scripts": {
     "build": "rollup -c",
-    "serve": "http-server . -p 5000 --cors='*'"
+    "serve": "http-server . -p 5020 --cors='*'"
   },
   "dependencies": {
     "cross-env": "^7.0.3",

packages/examples/simple-react-systemjs/host-systemjs/rollup.config.mjs

@@ -2,7 +2,7 @@ import babel from '@rollup/plugin-babel'
 import commonjs from '@rollup/plugin-commonjs'
 import resolve from '@rollup/plugin-node-resolve'
 import federation from '@originjs/vite-plugin-federation'
-import pkg from './package.json' assert { type: 'json' }
+import pkg from './package.json' with { type: 'json' }
 import replace from '@rollup/plugin-replace'
 
 export default {
@@ -20,7 +20,7 @@ export default {
     federation({
       remotes: {
         remote_app: {
-          external: 'http://localhost:5001/remoteEntry.js',
+          external: 'http://localhost:5021/remoteEntry.js',
           from: 'vite',
           format: 'esm'
         }

packages/examples/simple-react-systemjs/package.json

@@ -10,7 +10,7 @@
   "scripts": {
     "build": "pnpm --parallel --filter \"./**\" build ",
     "serve": "pnpm --parallel --filter \"./**\" serve",
-    "stop": "kill-port --port 5000,5001"
+    "stop": "kill-port --port 5020,5021"
   },
   "devDependencies": {
     "@originjs/vite-plugin-federation": "workspace:*",

packages/examples/simple-react-systemjs/remote-systemjs/package.json

@@ -5,7 +5,7 @@
   "license": "MulanPSL-2.0",
   "scripts": {
     "build": "rollup -c",
-    "serve": "http-server ./dist -p 5001 --cors='*'"
+    "serve": "http-server ./dist -p 5021 --cors='*'"
   },
   "dependencies": {
     "cross-env": "^7.0.3",

packages/examples/simple-react-systemjs/remote-systemjs/rollup.config.mjs

@@ -3,7 +3,7 @@ import commonjs from '@rollup/plugin-commonjs'
 import resolve from '@rollup/plugin-node-resolve'
 import federation from '@originjs/vite-plugin-federation'
 import replace from '@rollup/plugin-replace'
-import pkg from './package.json' assert { type: 'json' }
+import pkg from './package.json' with { type: 'json' }
 
 export default {
   input: 'src/index.js',

packages/examples/simple-react-webpack/host/index.js

@@ -10,7 +10,7 @@ System.register(['./__federation_shared_react.js', './__federation_shared_react-
     execute: (function() {
 
       const remotesMap = {
-        'remote_app': () => __federation_import('http://localhost:5001/remoteEntry.js')
+        'remote_app': () => __federation_import('http://localhost:5041/remoteEntry.js')
       }
       const processModule = (mod) => {
         if (mod && mod.default) {

packages/examples/simple-react-webpack/host/package.json

@@ -5,7 +5,7 @@
   "license": "MulanPSL-2.0",
   "scripts": {
     "build": "rollup -c",
-    "serve": "http-server . -p 5000 --cors='*'"
+    "serve": "http-server . -p 5040 --cors='*'"
   },
   "dependencies": {
     "cross-env": "^7.0.3",

packages/examples/simple-react-webpack/host/rollup.config.mjs

@@ -2,7 +2,7 @@ import babel from '@rollup/plugin-babel'
 import commonjs from '@rollup/plugin-commonjs'
 import resolve from '@rollup/plugin-node-resolve'
 import federation from '@originjs/vite-plugin-federation'
-import pkg from './package.json' assert { type: 'json' }
+import pkg from './package.json' with { type: 'json' }
 import replace from '@rollup/plugin-replace'
 
 export default {
@@ -21,7 +21,7 @@ export default {
     federation({
       remotes: {
         remote_app: {
-          external: 'http://localhost:5001/remoteEntry.js',
+          external: 'http://localhost:5041/remoteEntry.js',
           from: 'webpack'
         }
       },

packages/examples/simple-react-webpack/package.json

@@ -10,7 +10,7 @@
   "scripts": {
     "build": "pnpm --parallel --filter \"./**\" build",
     "serve": "pnpm --parallel --filter \"./**\" serve",
-    "stop": "kill-port --port 5000,5001"
+    "stop": "kill-port --port 5040,5041"
   },
   "devDependencies": {
     "@originjs/vite-plugin-federation": "workspace:*",

packages/examples/simple-react-webpack/remote/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "start": "webpack-cli serve",
     "build": "webpack --mode development",
-    "serve": "serve dist -p 5001 --cors='*'",
+    "serve": "serve dist -p 5041 --cors='*'",
     "clean": "rm -rf dist"
   },
   "dependencies": {
@@ -14,6 +14,7 @@
   },
   "devDependencies": {
     "serve": "^14.0.0",
+    "html-webpack-plugin": "^5.5.0",
     "@babel/core": "^7.20.7",
     "@babel/preset-react": "^7.18.6",
     "babel-loader": "^9.1.0",

packages/examples/simple-react-webpack/remote/webpack.config.js

@@ -12,7 +12,7 @@ module.exports = {
   output: {
     libraryTarget: 'system',
     libraryExport: 'main',
-    publicPath: 'http://localhost:5001/'
+    publicPath: 'http://localhost:5041/'
   },
   optimization: {
     // minimize: true,
@@ -59,7 +59,7 @@ module.exports = {
     static: {
       directory: path.join(__dirname)
     },
-    port: 5001,
+    port: 5041,
     headers: {
       'Access-Control-Allow-Origin': '*',
       'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',

packages/examples/vitestSetup-dev.ts

@@ -26,6 +26,18 @@ export let viteTestUrl: string = ''
 
 const DIR = join(os.tmpdir(), 'vitest_playwright_global_setup')
 
+const waitForServer = async (url: string, timeout = 30000) => {
+  const start = Date.now()
+  while (Date.now() - start < timeout) {
+    try {
+      const res = await fetch(url)
+      if (res.ok) return
+    } catch {}
+    await new Promise(r => setTimeout(r, 500))
+  }
+  throw new Error(`Server at ${url} not ready after ${timeout}ms`)
+}
+
 let err: Error
 let skipError: boolean
 
@@ -84,9 +96,16 @@ beforeAll(async (s) => {
       await execa('pnpm', ['run', 'build:remotes'], {cwd: testDir, stdio: 'inherit'})
 
 
-      const port = 5000
+      const portMap: Record<string, number> = {
+        'webpack-host': 5010,
+        'simple-react-systemjs': 5020,
+        'basic-host-remote': 5030,
+        'simple-react-webpack': 5040,
+      }
+      const port = portMap[testName] ?? 5000
       // use resolved port/base from server
       viteTestUrl = `http://localhost:${port}`
+      await waitForServer(viteTestUrl)
       await page.goto(viteTestUrl)
     }
   } catch (e) {
@@ -101,7 +120,7 @@ beforeAll(async (s) => {
     // a timeout with an exception that hides the real error in the console.
     await page.close()
   }
-}, 60000)
+}, 120000)
 
 afterAll(async () => {
   await page?.close()

packages/examples/vitestSetup-serve.ts

@@ -26,6 +26,18 @@ export let viteTestUrl = ''
 
 const DIR = join(os.tmpdir(), 'vitest_playwright_global_setup')
 
+const waitForServer = async (url: string, timeout = 30000) => {
+  const start = Date.now()
+  while (Date.now() - start < timeout) {
+    try {
+      const res = await fetch(url)
+      if (res.ok) return
+    } catch {}
+    await new Promise(r => setTimeout(r, 500))
+  }
+  throw new Error(`Server at ${url} not ready after ${timeout}ms`)
+}
+
 let err: Error
 let skipError: boolean
 
@@ -81,9 +93,16 @@ beforeAll(async (s) => {
       execa('pnpm', ['run', 'serve'], { cwd: testDir, stdio: 'inherit' })
       await execa('pnpm', ['run', 'build'], { cwd: testDir, stdio: 'inherit' })
 
-      const port = 5000
+      const portMap: Record<string, number> = {
+        'webpack-host': 5010,
+        'simple-react-systemjs': 5020,
+        'basic-host-remote': 5030,
+        'simple-react-webpack': 5040,
+      }
+      const port = portMap[testName] ?? 5000
       // use resolved port/base from server
       viteTestUrl = `http://localhost:${port}`
+      await waitForServer(viteTestUrl)
       await page.goto(viteTestUrl)
     }
   } catch (e) {
@@ -98,7 +117,7 @@ beforeAll(async (s) => {
     // a timeout with an exception that hides the real error in the console.
     await page.close()
   }
-}, 60000)
+}, 120000)
 
 afterAll(async () => {
   await page?.close()

packages/examples/webpack-host/README.md

@@ -4,9 +4,9 @@ This example demos consumption of federated modules from a vite bundle as a remo
 
 ## Running
 
-First, run `pnpm install`, then `pnpm run build` and `pnpm run serve`. This will build and serve both `host` and `remote` on ports 5000, 5001 respectively.
+First, run `pnpm install`, then `pnpm run build` and `pnpm run serve`. This will build and serve both `host` and `remote` on ports 5010, 5011 respectively.
 
 - HOST: [localhost:8080](http://localhost:8080/)
-- REMOTE: [localhost:5001](http://localhost:5001/)
+- REMOTE: [localhost:5011](http://localhost:5011/)
 
 `CTRL + C` can only stop the host server. You can run `pnpm stop` to stop all services.

packages/examples/webpack-host/host/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "start": "webpack-cli serve",
     "build": "webpack --mode development",
-    "serve": "serve dist -p 5000 --cors='*'",
+    "serve": "serve dist -p 5010 --cors='*'",
     "clean": "rm -rf dist"
   },
   "dependencies": {

packages/examples/webpack-host/host/webpack.config.js

@@ -46,7 +46,7 @@ module.exports = {
       name: 'webpackHost',
       filename: 'remoteEntry.js',
       remotes: {
-        viteRemote: `promise import("http://localhost:5001/assets/remoteEntry.js")`,
+        viteRemote: `promise import("http://localhost:5011/assets/remoteEntry.js")`,
       },
       shared: {
         react: {

packages/examples/webpack-host/package.json

@@ -7,7 +7,7 @@
     "build:remotes": "pnpm --filter \"./remote\"  build",
     "serve:remotes": "pnpm --filter \"./remote\"  serve",
     "dev:hosts": "pnpm --filter \"./host\" dev",
-    "stop": "kill-port --port 5000,5001"
+    "stop": "kill-port --port 5010,5011"
   },
   "workspaces": [
     "host",

packages/examples/webpack-host/remote/package.json

@@ -4,10 +4,10 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite --port 5001 --strictPort",
+    "dev": "vite --port 5011 --strictPort",
     "build": "vite build",
-    "preview": "vite preview --port 5001 --strictPort",
-    "serve": "vite preview --port 5001 --strictPort"
+    "preview": "vite preview --port 5011 --strictPort",
+    "serve": "vite preview --port 5011 --strictPort"
   },
   "dependencies": {
     "react": "^18.2.0",