@module-federation/[email protected] module not found error

[Capricair]

Describe the bug

@module-federation/[email protected] throw module not found error when start dev server, but the same code works fine in codesandbox, reinstall it didn't work either, but version 8.1.3 works fine.

dependencies:

next: 12.3.1
react: 17.0.2
react-dom: 17.0.2

PS E:\work\app-store> npm run dev

> [email protected] dev
> cross-env NODE_ENV=development next dev -p 3001

ready - started server on 0.0.0.0:3001, url: http://localhost:3001
info  - Loaded env from E:\work\app-store\.env
NEXT_PUBLIC_BASE_PATH: undefined
Error: Cannot find module 'E:\work\app-store\node_modules\next\dist\compiled\lib\util\makeSerializable'
Require stack:
- E:\work\app-store\node_modules\@module-federation\enhanced\dist\src\lib\container\ContainerExposedDependency.js
- E:\work\app-store\node_modules\@module-federation\enhanced\dist\src\lib\container\ContainerEntryModule.js
- E:\work\app-store\node_modules\@module-federation\enhanced\dist\src\lib\container\HoistContainerReferencesPlugin.js
- E:\work\app-store\node_modules\@module-federation\enhanced\dist\src\wrapper\HoistContainerReferencesPlugin.js
- E:\work\app-store\node_modules\@module-federation\enhanced\dist\src\index.js
- E:\work\app-store\node_modules\@module-federation\nextjs-mf\dist\src\internal.js
- E:\work\app-store\node_modules\@module-federation\nextjs-mf\dist\src\plugins\NextFederationPlugin\next-fragments.js
- E:\work\app-store\node_modules\@module-federation\nextjs-mf\dist\src\plugins\NextFederationPlugin\index.js
- E:\work\app-store\node_modules\@module-federation\nextjs-mf\dist\src\index.js
- E:\work\app-store\next.config.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
    at mod._resolveFilename (E:\work\app-store\node_modules\next\dist\build\webpack\require-hook.js:27:32)
    at mod._resolveFilename (E:\work\app-store\node_modules\next\dist\build\webpack\require-hook.js:27:32)
    at mod._resolveFilename (E:\work\app-store\node_modules\next\dist\build\webpack\require-hook.js:27:32)
    at Module._load (node:internal/modules/cjs/loader:922:27)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at require (node:internal/modules/cjs/helpers:119:18)
    at Object.<anonymous> (E:\work\app-store\node_modules\@module-federation\enhanced\dist\src\lib\container\ContainerExposedDependency.js:8:26)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'E:\\work\\app-store\\node_modules\\@module-federation\\enhanced\\dist\\src\\lib\\container\\ContainerExposedDependency.js',
    'E:\\work\\app-store\\node_modules\\@module-federation\\enhanced\\dist\\src\\lib\\container\\ContainerEntryModule.js',
    'E:\\work\\app-store\\node_modules\\@module-federation\\enhanced\\dist\\src\\lib\\container\\HoistContainerReferencesPlugin.js',
    'E:\\work\\app-store\\node_modules\\@module-federation\\enhanced\\dist\\src\\wrapper\\HoistContainerReferencesPlugin.js',
    'E:\\work\\app-store\\node_modules\\@module-federation\\enhanced\\dist\\src\\index.js',
    'E:\\work\\app-store\\node_modules\\@module-federation\\nextjs-mf\\dist\\src\\internal.js',
    'E:\\work\\app-store\\node_modules\\@module-federation\\nextjs-mf\\dist\\src\\plugins\\NextFederationPlugin\\next-fragments.js',
    'E:\\work\\app-store\\node_modules\\@module-federation\\nextjs-mf\\dist\\src\\plugins\\NextFederationPlugin\\index.js',
    'E:\\work\\app-store\\node_modules\\@module-federation\\nextjs-mf\\dist\\src\\index.js',
    'E:\\work\\app-store\\next.config.js'
  ]
}

Reproduction

https://codesandbox.io/p/devbox/module-federation-x4qjrt?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clreaqnam0007356hcnits3rr%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clreaqnal0002356hg57oqztm%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clreaqnal0004356hry63c7rh%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clreaqnal0006356htc9yst8k%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clreaqnal0002356hg57oqztm%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clreaqnak0001356h0upnwz9u%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%257D%255D%252C%2522id%2522%253A%2522clreaqnal0002356hg57oqztm%2522%252C%2522activeTabId%2522%253A%2522clreaqnak0001356h0upnwz9u%2522%257D%252C%2522clreaqnal0006356htc9yst8k%2522%253A%257B%2522id%2522%253A%2522clreaqnal0006356htc9yst8k%2522%252C%2522activeTabId%2522%253A%2522clrebaq6202p9356hd8rea85b%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A3000%252C%2522id%2522%253A%2522clrebaq6202p9356hd8rea85b%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%257D%252C%2522clreaqnal0004356hry63c7rh%2522%253A%257B%2522id%2522%253A%2522clreaqnal0004356hry63c7rh%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clreb65fh02d7356hxtqmjowg%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clreb66p200bxefgeerx9e7cs%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clreb65fh02d7356hxtqmjowg%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Used Package Manager

npm

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i3-10100 CPU @ 3.60GHz
    Memory: 5.66 GB / 15.67 GB
  Binaries:
    Node: 18.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.21 - C:\Program Files\nodejs\yarn.CMD
    npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (120.0.2210.133)
    Internet Explorer: 11.0.19041.3636

Validations

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

[gryp17]

Same issue here. Only managed to get it working using next 13.4.4 and @module-federation/nextjs-mf 6.0.4. Upgrading nextjs-mf to version 8+ causes the same module not found error. Even this demo throws the same error message.

[yunusileri]

I have that same problem. Version 8.1.3 works in dev mode, it does not work after build. When I upgrade to a higher version, I get a Module not found error. The only version I can run right now is 5.12.11.

[richardklotz]

I found that there are two (at least) issues on windows. One is with how the webpack path is calculated and the other is the entry file located at node_modules\.federation. Fixing both of those allows the app to start.

Running on Windows

normalizeWebpackPath:

=========webpackErrLocation=============== at webpack (C:\code\TestApp\node_modules\webpack\lib\webpack.js:167:32)
=========webpackLocationWithDetail======== C:\code\TestApp\node_modules\webpack\lib\webpack.js:167:32
=========webpackPath====================== C

node_modules\.federation \ needs escaped

import federation from 'C:\code\TestApp\node_modules\@module-federation\webpack-bundler-runtime\dist\index.cjs.js';
import plugin_0 from 'C:\code\TestApp\node_modules\@module-federation\nextjs-mf\dist\src\plugins\container\runtimePlugin.js';

__webpack_require__.federation = { ...federation, ...__webpack_require__.federation };
if (!__webpack_require__.federation.instance) {
	__webpack_require__.federation.initOptions.plugins = ([
		plugin_0(),
	])
	__webpack_require__.federation.instance = __webpack_require__.federation.runtime.init(__webpack_require__.federation.initOptions);
	if (__webpack_require__.federation.attachShareScopeMap) {
		__webpack_require__.federation.attachShareScopeMap(__webpack_require__)
	}
	if (__webpack_require__.federation.installInitialConsumes) {
		__webpack_require__.federation.installInitialConsumes()
	}
}

Running on Windows WSL

normalizeWebpackPath:

=========webpackErrLocation===============  at webpack (/root/code/TestApp/node_modules/webpack/lib/webpack.js:167:32)
=========webpackLocationWithDetail======== /root/code/TestApp/node_modules/webpack/lib/webpack.js:167:32
=========webpackPath====================== /root/code/TestApp/node_modules/webpack/lib/webpack.js`

node_modules\.federation

import federation from '/root/code/TestApp/node_modules/@module-federation/nextjs-mf/node_modules/@module-federation/webpack-bundler-runtime/dist/index.cjs.js';
import plugin_0 from '/root/code/TestApp/node_modules/@module-federation/nextjs-mf/dist/src/plugins/container/runtimePlugin.js';

__webpack_require__.federation = {...federation,...__webpack_require__.federation};
if(!__webpack_require__.federation.instance){
	__webpack_require__.federation.initOptions.plugins = ([
		plugin_0(),
	])
	__webpack_require__.federation.instance = __webpack_require__.federation.runtime.init(__webpack_require__.federation.initOptions);
	if(__webpack_require__.federation.attachShareScopeMap){
		__webpack_require__.federation.attachShareScopeMap(__webpack_require__)
	}
	if(__webpack_require__.federation.installInitialConsumes){
		__webpack_require__.federation.installInitialConsumes()
	}
}

[ScriptedAlchemy]

Looks like this is windows related. https://github.com/module-federation/universe/pull/1997

[senuravihanjayadeva]

Same issue here

[armedi]

Same issue here. We are trying to migrate our CRA based apps to Next.js. Majority of team members are using windows

[Icammarano]

I have same issue in linux, Nextjs 14.0.1, module-federation 8.1.10 and webpack 5.90.1. Need the solution for this error

[fgh151]

I have same issue in linux, Nextjs 14.1.0, module-federation 8.1.10 and webpack 5.90.1. Need the solution for this error

[renan-britz-mgm]

Hey everyone, remember to edit your package.json scripts like below, otherwise you'll get the Cannot find module [...]makeSerializable error:

"scripts": {
  "dev": "rimraf .next && NEXT_PRIVATE_LOCAL_WEBPACK=true next dev",
  "build": "NEXT_PRIVATE_LOCAL_WEBPACK=true next build"
  // ...
}

NEXT_PRIVATE_LOCAL_WEBPACK=true is required.

[carlosfvp]

Hey everyone, remember to edit your package.json scripts like below, otherwise you'll get the Cannot find module [...]makeSerializable error:

"scripts": {
  "dev": "rimraf .next && NEXT_PRIVATE_LOCAL_WEBPACK=true next dev",
  "build": "NEXT_PRIVATE_LOCAL_WEBPACK=true next build"
  // ...
}

NEXT_PRIVATE_LOCAL_WEBPACK=true is required.

this doesn't fix the makeSerializable error

[mtls-david-devargas]

same issue here

[jynzo94]

I receive this error too. I have to start new project with nextjs and module federation. Any ideas how to proceed?

[ScriptedAlchemy]

try latest version. If windows user use WSL. you can try .env as well and set it in there

[newmercer]

@ScriptedAlchemy I'm on 5.12.7 and wanted to upgrade it to 8.2.2. Getting below error with Module Not Found I have next 13, react 18 installed.

[semonec]

@ScriptedAlchemy Same error

nextjs: 14.1.0
@module-federation/nextjs-mf: 8.2.2
macOS: 13.6.4
node: v20.9.0 (same as v18, v20.10.0)

script from package.json

    "dev": "rm -rf .next && NEXT_PRIVATE_LOCAL_WEBPACK=true next dev",

next.config.mjs

const moduleFederationConfig = {
  name: 'commonHost',
  remotes: {
    homepage: "homepage@http://localhost:3001/remoteEntry.js"
  },
  filename: 'static/chunks/remoteEntry.js',
  exposes: {},
  shared: {},
  extraOptions: {},
}

const nextConfig = {
  env,
  reactStrictMode: false,
  images: {
    unoptimized: true, // Disables the default behavior of Next.js to automatically optimize images for SSG
  },
  // output: 'export',
  webpack(config, options) {
    if (!options.isServer) {
      config.plugins.push(new NextFederationPlugin(moduleFederationConfig))
    }
    return config
  },
}

Component

import dynamic from 'next/dynamic';

const Component = dynamic(()=> {
    const home =  import('homepage/Homepage')
    console.log(home)
}, {
    ssr: false,
    loading: () => <p>loading...</p>
})

const home = () => {
    return (
        <div>
            <Component />
        </div>
    )
}

export default home

It says,

  ⨯ ./src/pages/homepage.tsx:5:18
 Module not found: Can't resolve 'homepage/Homepage'
   3 |
   4 | const Component = dynamic(()=> {
 > 5 |     const home =  import('homepage/Homepage')
     |                  ^
   6 |     console.log(home)
   7 | }, {
   8 |     ssr: false,

[semonec]

• when I enable webpack config push in server case, it shows error like below

Import trace for requested module:
external "homepage@http://localhost:3001/remoteEntry.js"
remote homepage/Homepage
[ Module Federation Manifest Plugin ] Manifest Link: /_next/mf-manifest.json
 ⚠ external "homepage@http://localhost:3001/remoteEntry.js"
The generated code contains 'async/await' because this module is using "external script".
However, your target environment does not appear to support 'async/await'.
As a result, the code may not run as expected or may cause runtime errors.

[ScriptedAlchemy]

Yeah when enabled server plugin push, that external warning is fine. It works.

[ScriptedAlchemy]

@ScriptedAlchemy I'm on 5.12.7 and wanted to upgrade it to 8.2.2.

Getting below error with Module Not Found

I have next 13, react 18 installed.

Set env var like all my examples show on package json scripts. Next private local webpack or whatever it's called. That fixes serializeable error

[prakashmallow]

@ScriptedAlchemy I'm also facing the same issue with Nextjs 14.1.4 and module-federation 8.3.3

[Rajashekhar-Reddy]

Tried in ubuntu wsl, but still getting the same error

[email protected] dev cross-env NODE_ENV=development next dev -p 3001

ready - started server on 0.0.0.0:3001, url: http://localhost:3001 info - Loaded env from E:\work\app-store\.env NEXT_PUBLIC_BASE_PATH: undefined Error: Cannot find module 'E:\work\app-store\node_modules\next\dist\compiled\lib\util\makeSerializable'

Require stack:

• E:\work\app-store\node_modules@module-federation\enhanced\dist\src\lib\container\ContainerExposedDependency.js
• E:\work\app-store\node_modules@module-federation\enhanced\dist\src\lib\container\ContainerEntryModule.js
• E:\work\app-store\node_modules@module-federation\enhanced\dist\src\lib\container\HoistContainerReferencesPlugin.js
• E:\work\app-store\node_modules@module-federation\enhanced\dist\src\wrapper\HoistContainerReferencesPlugin.js
• E:\work\app-store\node_modules@module-federation\enhanced\dist\src\index.js
• E:\work\app-store\node_modules@module-federation\nextjs-mf\dist\src\internal.js
• E:\work\app-store\node_modules@module-federation\nextjs-mf\dist\src\plugins\NextFederationPlugin\next-fragments.js
• E:\work\app-store\node_modules@module-federation\nextjs-mf\dist\src\plugins\NextFederationPlugin\index.js
• E:\work\app-store\node_modules@module-federation\nextjs-mf\dist\src\index.js
• E:\work\app-store\next.config.js at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)

But suprisingly v8.1.3 works well but having a bulk of warnings

[shinyuna]

Same error 🥲

• next.js: 13.4.9
• @module-federation/nextjs-mf: 8.3.9

👆 It works.

• next.js: 14.2.3
• @module-federation/nextjs-mf: 8.3.9

👆 It doesn't work. The next server is returning a 500 error.

[prakashmallow]

Same error 🥲

• next.js: 13.4.9
• @module-federation/nextjs-mf: 8.3.9

👆 It works.

• next.js: 14.2.3
• @module-federation/nextjs-mf: 8.3.9

👆 It doesn't work. The next server is returning a 500 error.

Try with @module-federation/nextjs-mf: 8.1.0 and next.js: 14.2.3.

[sreeharinm]

⚠ external "shop@http://localhost:3001/_next/static/chunks/remoteEntry.js" The generated code contains 'async/await' because this module is using "external script". However, your target environment does not appear to support 'async/await'. As a result, the code may not run as expected or may cause runtime errors.

Import trace for requested module: external "shop@http://localhost:3001/_next/static/chunks/remoteEntry.js" remote shop/test

[HANYUNSEONG]

Same error 😢

• next v12.2.4
• @module-federation/nextjs-mf: 8.3.12
• mac os

add NEXT_PRIVATE_LOCAL_WEBPACK=true line in .env.local

"dev": "rm -rf .next && NEXT_PRIVATE_LOCAL_WEBPACK=true next dev",

-> Error: Cannot find module /node_modules/next/dist/compiled/lib/util/makeSerializable

[ScriptedAlchemy]

⚠ external "shop@http://localhost:3001/_next/static/chunks/remoteEntry.js"

The generated code contains 'async/await' because this module is using "external script".

However, your target environment does not appear to support 'async/await'.

As a result, the code may not run as expected or may cause runtime errors.

Import trace for requested module:

external "shop@http://localhost:3001/_next/static/chunks/remoteEntry.js"

remote shop/test

Not an error or issue.

[ScriptedAlchemy]

Same error 😢

• next v12.2.4

• @module-federation/nextjs-mf: 8.3.12

• mac os

add NEXT_PRIVATE_LOCAL_WEBPACK=true line in .env.local

"dev": "rm -rf .next && NEXT_PRIVATE_LOCAL_WEBPACK=true next dev",

-> Error: Cannot find module /node_modules/next/dist/compiled/lib/util/makeSerializable

Install webpack. Not sure if next 12 allows the override var or not.

[HANYUNSEONG]

Same error 😢

• next v12.2.4
• @module-federation/nextjs-mf: 8.3.12
• mac os

add NEXT_PRIVATE_LOCAL_WEBPACK=true line in .env.local "dev": "rm -rf .next && NEXT_PRIVATE_LOCAL_WEBPACK=true next dev", -> Error: Cannot find module /node_modules/next/dist/compiled/lib/util/makeSerializable

Install webpack. Not sure if next 12 allows the override var or not.

Thank you reply :) I installed "webpack": "^5.91.0" in my project. after, retry but same error 😭

[HANYUNSEONG]

Same error 😢

• next v12.2.4
• @module-federation/nextjs-mf: 8.3.12
• mac os

add NEXT_PRIVATE_LOCAL_WEBPACK=true line in .env.local "dev": "rm -rf .next && NEXT_PRIVATE_LOCAL_WEBPACK=true next dev", -> Error: Cannot find module /node_modules/next/dist/compiled/lib/util/makeSerializable

Install webpack. Not sure if next 12 allows the override var or not.

Thank you reply :) I installed "webpack": "^5.91.0" in my project. after, retry but same error 😭

Resolved after version upgrade nextjs 12.2.4 -> 13.5.6

[imarceloi]

⚠ external "shop@http://localhost:3001/_next/static/chunks/remoteEntry.js" The generated code contains 'async/await' because this module is using "external script". However, your target environment does not appear to support 'async/await'. As a result, the code may not run as expected or may cause runtime errors.

Import trace for requested module: external "shop@http://localhost:3001/_next/static/chunks/remoteEntry.js" remote shop/test

I'm receiving this same error here. Does someone knows how to fix this issue?

[haroldSanchezb]

Hi, I have expressjs with ts, webpack only for build bundles, and another project with commonjs and webpack i have this:

commonjs repo

const { UniversalFederationPlugin } = require('@module-federation/node');
[
    new UniversalFederationPlugin({
      name: 'remotelib',
      library: { type: 'commonjs-module' },
      isServer: true,
      remotes: {},
      filename: 'remoteEntry.js',
      useRuntimePlugin: true,
      exposes: {
        './calc': './src/util/calc',
      },
    }),
  ]

I use npx http-server for make available remoteEntry files

In my expressjs project: init file

import { init } from '@module-federation/runtime';
init({
  name: 'app-main',
  remotes: [
    {
      name: 'remote-lib',
      entry: 'http://localhost:8080/remoteEntry.js',
      alias: 'remotelib',
    },
  ],
});

in mi app route:

import { loadRemote } from '@module-federation/runtime';
appRouter.get('/remote', async (req, res) => {
  console.log('remote');

  try {
    const remote = await loadRemote('remotelib/calc');
    const result = (remote as any).calc(1, 2);

    res.send(result);
  } catch (error: any) {
    console.error(error);
    res.send('Error');
  }
});

I don't know why im getting this error:

Error: Script execution error: Error: Cannot find module '/node_modules/@module-federation/sdk/dist/dist/index.cjs.js'
    at handleScriptFetch (/node_modules/@module-federation/sdk/dist/index.cjs.js:655:16)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)