@module-federation/nextjs-mf@8.1.5 module not found error #1961

Capricair · 2024-01-15T02:57:46Z

Describe the bug

@module-federation/nextjs-mf@8.1.5 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

> app-store@1.0.0 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

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

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.

The text was updated successfully, but these errors were encountered:

gryp17 · 2024-01-15T20:44:10Z

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 · 2024-01-18T06:45:07Z

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 · 2024-01-18T16:48:10Z

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 · 2024-01-20T08:26:55Z

Looks like this is windows related.
#1997

senuravihanjayadeva · 2024-01-22T11:51:36Z

Same issue here

armedi · 2024-01-26T03:21:41Z

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

Icammarano · 2024-02-06T13:50:20Z

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 · 2024-02-07T10:25:39Z

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 · 2024-02-11T18:47:40Z

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 · 2024-02-15T06:05:48Z

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 · 2024-02-15T14:29:03Z

same issue here

jynzo94 · 2024-02-15T20:07:41Z

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

ScriptedAlchemy · 2024-03-07T05:31:33Z

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

newmercer · 2024-03-11T02:22:53Z

@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 · 2024-03-13T14:44:52Z

@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 · 2024-03-13T14:47:36Z

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 · 2024-03-18T12:18:38Z

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

ScriptedAlchemy · 2024-03-18T12:19:42Z

@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 · 2024-04-12T01:54:17Z

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

Rajashekhar-Reddy · 2024-04-27T13:34:45Z

Tried in ubuntu wsl, but still getting the same error

app-store@1.0.0 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 · 2024-04-28T07:54:37Z

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 · 2024-04-29T04:37:30Z

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 · 2024-04-29T10:56:28Z

⚠ 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 · 2024-05-02T06:30:34Z

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 · 2024-05-02T07:27:27Z

⚠ 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 · 2024-05-02T07:29:04Z

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 · 2024-05-02T09:02:49Z

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 · 2024-05-03T06:12:09Z

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 · 2024-05-28T19:16:17Z

⚠ 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?

jonthomp mentioned this issue Jan 19, 2024

fix: normalize bundler runtime import paths #1997

Merged

6 tasks

zhoushaw assigned ScriptedAlchemy Jan 30, 2024

zhoushaw added the nextjs-mf nextjs-mf package identifier label Jan 30, 2024

tryptamine25 mentioned this issue May 4, 2024

nextjs mf does not generate remoteEntry.js module-federation/module-federation-examples#3845

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

@module-federation/nextjs-mf@8.1.5 module not found error #1961

@module-federation/nextjs-mf@8.1.5 module not found error #1961

Capricair commented Jan 15, 2024 •

edited

Loading

gryp17 commented Jan 15, 2024

yunusileri commented Jan 18, 2024

richardklotz commented Jan 18, 2024

ScriptedAlchemy commented Jan 20, 2024

senuravihanjayadeva commented Jan 22, 2024

armedi commented Jan 26, 2024

Icammarano commented Feb 6, 2024

fgh151 commented Feb 7, 2024

renan-britz-mgm commented Feb 11, 2024 •

edited

Loading

carlosfvp commented Feb 15, 2024

mtls-david-devargas commented Feb 15, 2024

jynzo94 commented Feb 15, 2024

ScriptedAlchemy commented Mar 7, 2024

newmercer commented Mar 11, 2024

semonec commented Mar 13, 2024

semonec commented Mar 13, 2024

ScriptedAlchemy commented Mar 18, 2024

ScriptedAlchemy commented Mar 18, 2024

prakashmallow commented Apr 12, 2024

Rajashekhar-Reddy commented Apr 27, 2024 •

edited

Loading

shinyuna commented Apr 28, 2024 •

edited

Loading

prakashmallow commented Apr 29, 2024

sreeharinm commented Apr 29, 2024

HANYUNSEONG commented May 2, 2024

ScriptedAlchemy commented May 2, 2024

ScriptedAlchemy commented May 2, 2024

HANYUNSEONG commented May 2, 2024 •

edited

Loading

HANYUNSEONG commented May 3, 2024

imarceloi commented May 28, 2024

@module-federation/nextjs-mf@8.1.5 module not found error #1961

@module-federation/nextjs-mf@8.1.5 module not found error #1961

Comments

Capricair commented Jan 15, 2024 • edited Loading

Describe the bug

Reproduction

Used Package Manager

System Info

Validations

gryp17 commented Jan 15, 2024

yunusileri commented Jan 18, 2024

richardklotz commented Jan 18, 2024

ScriptedAlchemy commented Jan 20, 2024

senuravihanjayadeva commented Jan 22, 2024

armedi commented Jan 26, 2024

Icammarano commented Feb 6, 2024

fgh151 commented Feb 7, 2024

renan-britz-mgm commented Feb 11, 2024 • edited Loading

carlosfvp commented Feb 15, 2024

mtls-david-devargas commented Feb 15, 2024

jynzo94 commented Feb 15, 2024

ScriptedAlchemy commented Mar 7, 2024

newmercer commented Mar 11, 2024

semonec commented Mar 13, 2024

semonec commented Mar 13, 2024

ScriptedAlchemy commented Mar 18, 2024

ScriptedAlchemy commented Mar 18, 2024

prakashmallow commented Apr 12, 2024

Rajashekhar-Reddy commented Apr 27, 2024 • edited Loading

shinyuna commented Apr 28, 2024 • edited Loading

prakashmallow commented Apr 29, 2024

sreeharinm commented Apr 29, 2024

HANYUNSEONG commented May 2, 2024

ScriptedAlchemy commented May 2, 2024

ScriptedAlchemy commented May 2, 2024

HANYUNSEONG commented May 2, 2024 • edited Loading

HANYUNSEONG commented May 3, 2024

imarceloi commented May 28, 2024

Capricair commented Jan 15, 2024 •

edited

Loading

renan-britz-mgm commented Feb 11, 2024 •

edited

Loading

Rajashekhar-Reddy commented Apr 27, 2024 •

edited

Loading

shinyuna commented Apr 28, 2024 •

edited

Loading

HANYUNSEONG commented May 2, 2024 •

edited

Loading