"SyntaxError" error when importing from @module-federation/runtime with an ESM project

[patricklafrance]

Describe the bug

I am trying to import loadRemote from @module-federation/runtime but I keep getting errors like:

samples/basic/another-remote-module dev: (node:90956) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
samples/basic/another-remote-module dev: (Use `node --trace-warnings ...` to show where the warning was created)
samples/basic/host dev: (node:72552) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

samples/basic/another-remote-module dev: import { g as getGlobalHostPlugins, a as globalLoading, D as DEFAULT_REMOTE_TYPE, b as DEFAULT_SCOPE, c as getRemoteEntryExports, d as assert, s as safeToString, e as getFMId, i as isObject, f as error, w as warn, h as isPlainObject, j as isRemoteInfoWithEntry, k as isPureRemoteEntry, l as getInfoWithoutType, m as getPreloaded, n as setPreloaded, o as getRegisteredShare, p as arrayOptions, q as getGlobalSnapshotInfoByModuleInfo, r as addGlobalSnapshot, t as setGlobalSnapshotInfoByModuleInfo, u as getGlobalSnapshot, G as Global, v as getGlobalShareScope, x as getTargetSharedOptions, y as formatShareConfigs, z as getBuilderId, A as isBrowserEnv, B as addUniqueItem, C as setGlobalFederationConstructor, E as getGlobalFederationInstance, F as getGlobalFederationConstructor, H as setGlobalFederationInstance } from './share.esm.js';

SyntaxError: Cannot use import statement outside a module

My project is an ESM project with type: module in the package.json file.

I tried a few syntaxes but without success:

import { loadRemote } from "@module-federation/runtime";

import FederationRuntime from "@module-federation/runtime";

FederationRuntime.loadRemote(...);

import * as FederationRuntime from "@module-federation/runtime";

FederationRuntime.loadRemote(...);

Thank you,

Patrick

Reproduction

https://github.com/patricklafrance/mf-enhanced-import-from-runtime-issue

Used Package Manager

pnpm

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 14.54 GB / 31.70 GB
  Binaries:
    Node: 21.7.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.4 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Chrome: 124.0.6367.61
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.22621.1

Validations

• Read the docs.
• Read the common issues list.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Module federation issue and not a framework-specific issue.
• The provided reproduction is a minimal reproducible example of the bug.

[ilteoood]

With your same version of node and pnpm, I'm not able to reproduce this on mac OS.

Could it be an error with your installation of node? Can you try with node20 configured maybe with tools like fnm?

Here are the logs of the test I did:

packages/remote-2 dev$ webpack serve --config webpack.dev.js
packages/host dev: [ Module Federation Manifest Plugin ]: Manifest will not generate, because publicPath can only be absolute path, but got 'auto'
packages/host dev: (node:11704) [DEP_WEBPACK_PRE_COMPILED_SCHEMA_INVALID] DeprecationWarning: webpack bug: Pre-compiled schema reports error while real schema is happy. This has performance drawbacks.
packages/host dev: (Use `node --trace-deprecation ...` to show where the warning was created)
packages/remote-2 dev: (node:11736) [DEP_WEBPACK_PRE_COMPILED_SCHEMA_INVALID] DeprecationWarning: webpack bug: Pre-compiled schema reports error while real schema is happy. This has performance drawbacks.
packages/remote-2 dev: (Use `node --trace-deprecation ...` to show where the warning was created)
packages/remote-1 dev: (node:11720) [DEP_WEBPACK_PRE_COMPILED_SCHEMA_INVALID] DeprecationWarning: webpack bug: Pre-compiled schema reports error while real schema is happy. This has performance drawbacks.
packages/remote-1 dev: (Use `node --trace-deprecation ...` to show where the warning was created)
packages/remote-1 dev: <i> [webpack-dev-server] Project is running at:
packages/remote-1 dev: <i> [webpack-dev-server] Loopback: http://localhost:8081/
packages/remote-1 dev: <i> [webpack-dev-server] On Your Network (IPv4): http://192.168.1.45:8081/
packages/remote-1 dev: <i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:8081/
packages/remote-1 dev: <i> [webpack-dev-server] Content not from webpack is served from '/Users/ilteoood/Documents/git/personal/mf-enhanced-import-webpack-plugin-issue/packages/remote-1/public' directory
packages/remote-1 dev: <i> [webpack-dev-server] 404s will fallback to '/index.html'
packages/remote-2 dev: <i> [webpack-dev-server] Project is running at:
packages/remote-2 dev: <i> [webpack-dev-server] Loopback: http://localhost:8082/
packages/remote-2 dev: <i> [webpack-dev-server] On Your Network (IPv4): http://192.168.1.45:8082/
packages/remote-2 dev: <i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:8082/
packages/remote-2 dev: <i> [webpack-dev-server] Content not from webpack is served from '/Users/ilteoood/Documents/git/personal/mf-enhanced-import-webpack-plugin-issue/packages/remote-2/public' directory
packages/remote-2 dev: <i> [webpack-dev-server] 404s will fallback to '/index.html'
packages/remote-1 dev: <i> [webpack-dev-middleware] wait until bundle finished: /@mf-types.zip
packages/host dev: <i> [webpack-dev-server] Project is running at:
packages/host dev: <i> [webpack-dev-server] Loopback: http://localhost:8080/
packages/host dev: <i> [webpack-dev-server] On Your Network (IPv4): http://192.168.1.45:8080/
packages/host dev: <i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:8080/
packages/host dev: <i> [webpack-dev-server] Content not from webpack is served from '/Users/ilteoood/Documents/git/personal/mf-enhanced-import-webpack-plugin-issue/packages/host/public' directory
packages/host dev: <i> [webpack-dev-server] 404s will fallback to '/index.html'
packages/remote-2 dev: <i> [webpack-dev-middleware] wait until bundle finished: /@mf-types.zip
packages/remote-2 dev: Unable to compile federated types, Error: File not found: /Users/ilteoood/Documents/git/personal/mf-enhanced-import-webpack-plugin-issue/packages/remote-2/lib/@mf-types/
packages/remote-2 dev: Error: ENOENT: no such file or directory, open '/Users/ilteoood/Documents/git/personal/mf-enhanced-import-webpack-plugin-issue/packages/remote-2/lib/@mf-types.zip'
packages/remote-2 dev:     at Object.openSync (node:fs:580:18)
packages/remote-2 dev:     at Object.readFileSync (node:fs:459:35)
packages/remote-2 dev:     at /Users/ilteoood/Documents/git/personal/mf-enhanced-import-webpack-plugin-issue/node_modules/.pnpm/@module-federation+dts-plugin@0.1.6_typescript@5.4.5_vue-tsc@1.8.27/node_modules/@module-federation/dts-plugin/dist/index.js:2233:38
packages/remote-2 dev:     at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
packages/remote-2 dev:   errno: -2,
packages/remote-2 dev:   code: 'ENOENT',
packages/remote-2 dev:   syscall: 'open',
packages/remote-2 dev:   path: '/Users/ilteoood/Documents/git/personal/mf-enhanced-import-webpack-plugin-issue/packages/remote-2/lib/@mf-types.zip'
packages/remote-2 dev: }
packages/remote-1 dev: Unable to compile federated types, Error: File not found: /Users/ilteoood/Documents/git/personal/mf-enhanced-import-webpack-plugin-issue/packages/remote-1/lib/@mf-types/
packages/remote-1 dev: Error: ENOENT: no such file or directory, open '/Users/ilteoood/Documents/git/personal/mf-enhanced-import-webpack-plugin-issue/packages/remote-1/lib/@mf-types.zip'
packages/remote-1 dev:     at Object.openSync (node:fs:580:18)
packages/remote-1 dev:     at Object.readFileSync (node:fs:459:35)
packages/remote-1 dev:     at /Users/ilteoood/Documents/git/personal/mf-enhanced-import-webpack-plugin-issue/node_modules/.pnpm/@module-federation+dts-plugin@0.1.6_typescript@5.4.5_vue-tsc@1.8.27/node_modules/@module-federation/dts-plugin/dist/index.js:2233:38
packages/remote-1 dev:     at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
packages/remote-1 dev:   errno: -2,
packages/remote-1 dev:   code: 'ENOENT',
packages/remote-1 dev:   syscall: 'open',
packages/remote-1 dev:   path: '/Users/ilteoood/Documents/git/personal/mf-enhanced-import-webpack-plugin-issue/packages/remote-1/lib/@mf-types.zip'
packages/remote-1 dev: }
packages/remote-2 dev: assets by path *.js 3.48 MiB
packages/remote-2 dev:   asset vendors-node_modules_pnpm_lodash_4_17_21_node_modules_lodash_lodash_js.js 1.37 MiB [emitted] (id hint: vendors)
packages/remote-2 dev:   asset remoteEntry.js 1.06 MiB [emitted] (name: remote2)
packages/remote-2 dev:   asset main.js 1.05 MiB [emitted] (name: main)
packages/remote-2 dev:   asset node_modules_pnpm_useless-lib_2_1_0_node_modules_useless-lib_index_js.js 2.75 KiB [emitted]
packages/remote-2 dev:   asset __federation_expose_sayHello.js.js 1.81 KiB [emitted] (name: __federation_expose_sayHello.js)
packages/remote-2 dev: assets by path *.json 4.1 KiB
packages/remote-2 dev:   asset mf-stats.json 2.2 KiB [emitted]
packages/remote-2 dev:   asset mf-manifest.json 1.9 KiB [emitted]
packages/remote-2 dev: runtime modules 68.9 KiB 38 modules
packages/remote-2 dev: built modules 871 KiB (javascript) 84 bytes (share-init) 84 bytes (consume-shared) [built]
packages/remote-2 dev:   modules by path ../../node_modules/.pnpm/ 870 KiB 34 modules
packages/remote-2 dev:   modules by path ./ 1.16 KiB
packages/remote-2 dev:     ./src/index.js 34 bytes [built] [code generated]
packages/remote-2 dev:     ./node_modules/.federation/entry.018d031c241967ba5dc9abd1252bac71.js 952 bytes [built] [code generated]
packages/remote-2 dev:     ./src/sayHello.js 206 bytes [built] [code generated]
packages/remote-2 dev:   provide-module modules 84 bytes
packages/remote-2 dev:     provide shared module (default) lodash@4.17.21 = ../../node_modules/.pnpm/lodash...(truncated) 42 bytes [built] [code generated]
packages/remote-2 dev:     provide shared module (default) useless-lib@2.1.0 = ../../node_modules/.pnpm/use...(truncated) 42 bytes [built] [code generated]
packages/remote-2 dev:   consume-shared-module modules 84 bytes
packages/remote-2 dev:     consume shared module (default) lodash@=..1.7...2.1 (singleton) (fallback: ../.....(truncated) 42 bytes [built] [code generated]
packages/remote-2 dev:     consume shared module (default) useless-lib@~..1...0 (singleton) (fallback: ../....(truncated) 42 bytes [built] [code generated]
packages/remote-2 dev:   container entry 42 bytes [built] [code generated]
packages/remote-2 dev: webpack 5.91.0 compiled successfully in 2542 ms
packages/host dev: asset main.js 5.95 MiB [emitted] (name: main)
packages/host dev: asset vendors-node_modules_pnpm_react-dom_18_2_0_react_18_2_0_node_modules_react-dom_client_js-node-3dae5f.js 115 KiB [emitted] (id hint: vendors)
packages/host dev: asset src_bootstrap_jsx-webpack_sharing_consume_default_react-dom_react-dom-webpack_sharing_consume-c0d0cf.js 13.9 KiB [emitted]
packages/host dev: asset index.html 132 bytes [emitted]
packages/host dev: runtime modules 42.7 KiB 22 modules
packages/host dev: modules by path ../../node_modules/.pnpm/ 2.18 MiB 198 modules
packages/host dev: consume-shared-module modules 252 bytes
packages/host dev:   consume shared module (default) react@^8...2...0 (singleton) (fallback: ../../no...(truncated) 42 bytes [built] [code generated]
packages/host dev:   consume shared module (default) react@!=1.8...2...0 (singleton) (fallback: ../../node_modules/.pnpm/react@18.2.0/node_m...(truncated) 42 bytes [built] [code generated]
packages/host dev:   + 4 modules
packages/host dev: modules by path ./ 6.02 KiB
packages/host dev:   modules by path ./src/*.jsx 3.54 KiB 2 modules
packages/host dev:   ./node_modules/.federation/entry.eae1f0a4d52c9d4a99bf1a190c540fee.js 952 bytes [built] [code generated]
packages/host dev:   ./src/index.js 1.55 KiB [built] [code generated]
packages/host dev: provide-module modules 168 bytes
packages/host dev:   provide shared module (default) lodash@4.17.21 = ../../node_modules/.pnpm/lodash...(truncated) 42 bytes [built] [code generated]
packages/host dev:   provide shared module (default) react-dom@18.2.0 = ../../node_modules/.pnpm/reac...(truncated) 42 bytes [built] [code generated]
packages/host dev:   provide shared module (default) react@18.2.0 = ../../node_modules/.pnpm/react@18...(truncated) 42 bytes [built] [code generated]
packages/host dev:   provide shared module (default) useless-lib@2.0.0 = ../../node_modules/.pnpm/use...(truncated) 42 bytes [built] [code generated]
packages/host dev: webpack 5.91.0 compiled successfully in 2540 ms
packages/remote-1 dev: assets by path *.js 5.28 MiB
packages/remote-1 dev:   assets by chunk 1.72 MiB (id hint: vendors)
packages/remote-1 dev:     asset vendors-node_modules_pnpm_lodash_4_17_21_node_modules_lodash_lodash_js.js 1.37 MiB [emitted] (id hint: vendors)
packages/remote-1 dev:     asset vendors-node_modules_pnpm_react_18_2_0_node_modules_react_index_js.js 224 KiB [emitted] (id hint: vendors)
packages/remote-1 dev:     asset vendors-node_modules_pnpm_pmmmwh_react-refresh-webpack-plugin_0_5_11_react-refresh_0_14_0_web-13a2b3.js 133 KiB [emitted] (id hint: vendors)
packages/remote-1 dev:   asset main.js 1.78 MiB [emitted] (name: main)
packages/remote-1 dev:   asset remoteEntry.js 1.77 MiB [emitted] (name: remote1)
packages/remote-1 dev:   asset __federation_expose_HelloWorld.jsx.js 5.57 KiB [emitted] (name: __federation_expose_HelloWorld.jsx)
packages/remote-1 dev:   asset node_modules_pnpm_useless-lib_3_0_0_node_modules_useless-lib_index_js.js 2.75 KiB [emitted]
packages/remote-1 dev: assets by path *.json 5.41 KiB
packages/remote-1 dev:   asset mf-stats.json 2.9 KiB [emitted]
packages/remote-1 dev:   asset mf-manifest.json 2.51 KiB [emitted]
packages/remote-1 dev: runtime modules 77.1 KiB 42 modules
packages/remote-1 dev: modules by path ../../node_modules/.pnpm/ 1.18 MiB 191 modules
packages/remote-1 dev: modules by path ./ 3.55 KiB
packages/remote-1 dev:   ./src/index.js 1.17 KiB [built] [code generated]
packages/remote-1 dev:   ./node_modules/.federation/entry.43ade6d5c31dc5a07cd1deb3b145b91e.js 952 bytes [built] [code generated]
packages/remote-1 dev:   ./src/HelloWorld.jsx 1.45 KiB [built] [code generated]
packages/remote-1 dev: provide-module modules 126 bytes
packages/remote-1 dev:   provide shared module (default) lodash@4.17.21 = ../../node_modules/.pnpm/lodash...(truncated) 42 bytes [built] [code generated]
packages/remote-1 dev:   provide shared module (default) react@18.2.0 = ../../node_modules/.pnpm/react@18...(truncated) 42 bytes [built] [code generated]
packages/remote-1 dev:   provide shared module (default) useless-lib@3.0.0 = ../../node_modules/.pnpm/use...(truncated) 42 bytes [built] [code generated]
packages/remote-1 dev: consume-shared-module modules 126 bytes
packages/remote-1 dev:   consume shared module (default) lodash@=..1.7...2.1 (singleton) (fallback: ../.....(truncated) 42 bytes [built] [code generated]
packages/remote-1 dev:   consume shared module (default) useless-lib@=..0...0 (singleton) (fallback: ../....(truncated) 42 bytes [built] [code generated]
packages/remote-1 dev:   consume shared module (default) react@* (singleton) (fallback: ../../node_module...(truncated) 42 bytes [built] [code generated]
packages/remote-1 dev: container entry 42 bytes [built] [code generated]
packages/remote-1 dev: webpack 5.91.0 compiled successfully in 2602 ms
packages/host dev: Federated types extraction completed

[patricklafrance]

Hey @ilteoood, I am sorry about that, I will provide a better reproduction in the coming days 🙏🏻

[github-actions]

Hello @patricklafrance. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 5 days.

[patricklafrance]

I tried again to reproduce the issue. I still got it in my work repository but sadly I can't reproduce the issue in a standalone repository.

I made a new reproduction with a different strategy but still no luck: https://github.com/patricklafrance/mf-enhanced-import-from-runtime-issue

I guess I'll close for now, sorry about that.

@ilteoood I have a similar issue (#2368) but with the webpack plugin. This one as a working reproduction for Node 20, 21 and 22. If you don't mind taking a look at this one I would appreciate 🙏🏻 Thank you.