core: @module-federation/nextjs-mf@8.1.5 module not found error

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.

About this issue

Original URL
State: open
Created 6 months ago
Reactions: 4
Comments: 27 (6 by maintainers)

Most upvoted comments

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

Icammarano on Feb 6, 2024

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

carlosfvp on Feb 15, 2024

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

armedi on Jan 26, 2024

@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 on Mar 13, 2024

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.

renan-britz-mgm on Feb 11, 2024

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.

gryp17 on Jan 15, 2024