Next.js export with page-router and importRemote

[ayonix]

Describe the bug

ModuleFederation seems to be broken for us when we upgrade to @module-federation/[email protected].
The same code is working with ^7.0.8. We are using next 13.5.6 with export.

The host logs Uncaught (in promise) Error: Cannot find module '$path\host-app\node_modules\.pnpm\[email protected]\node_modules\react\index.js' and doesn't load the remote.

If there is a better way to import a module via a dynamic name from a remote I'm happy to work around it.

Reproduction

https://github.com/ayonix/mf-next-8-reproducer

Used Package Manager

pnpm

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
    Memory: 10.86 GB / 31.39 GB
  Binaries:
    Node: 21.4.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.14.0 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Chrome: master_preferences
    Edge: Spartan (44.19041.1266.0), Chromium (108.0.1462.46)
    Internet Explorer: 11.0.19041.1566

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.

[ScriptedAlchemy]

use loadRemote, init from @module-federation/runtime - you can also check dynamicRemotes examples in federation example repo

[ayonix]

Even with that and 8.1.5 the hooks don't seem to work?

ayonix/mf-next-8-reproducer@00507bb

 TypeError: I.current is null
    useEffect http://localhost:3000/MFRemote/959.js:2
    r http://localhost:3000/MFRemote/962.js:1
    NextJS 34

[ScriptedAlchemy]

You only use it client side, so init should be wrapped so server doesn't throw in like if typeof window

Is this throwing on server or client?

[ayonix]

The next host is built with export, so it's all client side.
The exception is thrown in the remote in the client.

[ScriptedAlchemy]

Ok I'll have to clone codebase and look

[ScriptedAlchemy]

Okay I found the issue of this.

I have a fix in progress

[ScriptedAlchemy]

Theres a bug i need to fix in library.
But, your public path and remote ports are wrong in the repo

publicPath: 'http://localhost:3002/',
const url = "http://localhost:3002/remote.js";

[ScriptedAlchemy]

@ayonix try this release of nextjs-mf 0.0.0-next-20240114005722

you need to also fix your ports, paths etc in the build configfs for the remote

[ayonix]

They're only wrong for serve, my use case is a next export though. I should've made that clearer, sorry.
build and start in the top level is what I'm testing with, so both host and remote are built and hosted by the express under different base paths.

With nextjs-mf 0.0.0-next-20240114005722 the host doesn't build with the error:

Error: Cannot find module '$path\Reproducer\host-app\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\compiled\lib\util\makeSerializable'

> Build error occurred
Error: Cannot find module '$path\Reproducer\host-app\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\compiled\lib\util\makeSerializable'
Require stack:
- $path\Reproducer\host-app\node_modules\.pnpm\@[email protected][email protected]\node_modules\@module-federation\enhanced\dist\src\lib\container\ContainerExposedDependency.js
- $path\Reproducer\host-app\node_modules\.pnpm\@[email protected][email protected]\node_modules\@module-federation\enhanced\dist\src\lib\container\ContainerEntryModule.js
- $path\Reproducer\host-app\node_modules\.pnpm\@[email protected][email protected]\node_modules\@module-federation\enhanced\dist\src\lib\container\HoistContainerReferencesPlugin.js
- $path\Reproducer\host-app\node_modules\.pnpm\@[email protected][email protected]\node_modules\@module-federation\enhanced\dist\src\wrapper\HoistContainerReferencesPlugin.js
- $path\Reproducer\host-app\node_modules\.pnpm\@[email protected][email protected]\node_modules\@module-federation\enhanced\dist\src\index.js
- $path\Reproducer\host-app\node_modules\.pnpm\@[email protected][email protected][email protected][email protected][email protected]\node_modules\@module-federation\nextjs-mf\dist\src\internal.js
- $path\Reproducer\host-app\node_modules\.pnpm\@[email protected][email protected][email protected][email protected][email protected]\node_modules\@module-federation\nextjs-mf\dist\src\plugins\NextFederationPlugin\next-fragments.js
- $path\Reproducer\host-app\node_modules\.pnpm\@[email protected][email protected][email protected][email protected][email protected]\node_modules\@module-federation\nextjs-mf\dist\src\plugins\NextFederationPlugin\index.js
- $path\Reproducer\host-app\node_modules\.pnpm\@[email protected][email protected][email protected][email protected][email protected]\node_modules\@module-federation\nextjs-mf\dist\src\index.js
- $path\Reproducer\host-app\next.config.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)
    at $path\Reproducer\host-app\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\server\require-hook.js:54:36
    at Module._load (node:internal/modules/cjs/loader:985:27)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at mod.require ($path\Reproducer\host-app\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\server\require-hook.js:64:28)
    at require (node:internal/modules/helpers:176:18)
    at Object.<anonymous> ($path\Reproducer\host-app\node_modules\.pnpm\@[email protected][email protected]\node_modules\@module-federation\enhanced\dist\src\lib\container\ContainerExposedDependency.js:8:26)
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'D:\\Development\\Reproducer\\host-app\\node_modules\\.pnpm\\@[email protected][email protected]\\node_modules\\@module-federation\\enhanced\\dist\\src\\lib\\container\\ContainerExposedDependency.js',      
    'D:\\Development\\Reproducer\\host-app\\node_modules\\.pnpm\\@[email protected][email protected]\\node_modules\\@module-federation\\enhanced\\dist\\src\\lib\\container\\ContainerEntryModule.js',
    'D:\\Development\\Reproducer\\host-app\\node_modules\\.pnpm\\@[email protected][email protected]\\node_modules\\@module-federation\\enhanced\\dist\\src\\lib\\container\\HoistContainerReferencesPlugin.js',  
    'D:\\Development\\Reproducer\\host-app\\node_modules\\.pnpm\\@[email protected][email protected]\\node_modules\\@module-federation\\enhanced\\dist\\src\\wrapper\\HoistContainerReferencesPlugin.js',
    'D:\\Development\\Reproducer\\host-app\\node_modules\\.pnpm\\@[email protected][email protected]\\node_modules\\@module-federation\\enhanced\\dist\\src\\index.js',
    'D:\\Development\\Reproducer\\host-app\\node_modules\\.pnpm\\@[email protected][email protected][email protected][email protected][email protected]\\node_modules\\@module-federation\\nextjs-mf\\dist\\src\\internal.js',
    'D:\\Development\\Reproducer\\host-app\\node_modules\\.pnpm\\@[email protected][email protected][email protected][email protected][email protected]\\node_modules\\@module-federation\\nextjs-mf\\dist\\src\\plugins\\NextFederationPlugin\\next-fragments.js',
    'D:\\Development\\Reproducer\\host-app\\node_modules\\.pnpm\\@[email protected][email protected][email protected][email protected][email protected]\\node_modules\\@module-federation\\nextjs-mf\\dist\\src\\plugins\\NextFederationPlugin\\index.js',
    'D:\\Development\\Reproducer\\host-app\\node_modules\\.pnpm\\@[email protected][email protected][email protected][email protected][email protected]\\node_modules\\@module-federation\\nextjs-mf\\dist\\src\\index.js',
    'D:\\Development\\Reproducer\\host-app\\next.config.js'
  ]
}

I've seen this error with other versions of next-mf or maybe it was only with next14. Probably it only happens when using next with export?

Update: ayonix/mf-next-8-reproducer@cf1dc7e

[ScriptedAlchemy]

Pulling your repo, this seems to work on my end.

That error looks like you have not set the following

NEXT_PRIVATE_LOCAL_WEBPACK=true

try using it on the command, not the .env file - i find .env file is not always reliable, maybe doesnt pick up in time for next buid.

NEXT_PRIVATE_LOCAL_WEBPACK=true next export
NEXT_PRIVATE_LOCAL_WEBPACK=true next build
NEXT_PRIVATE_LOCAL_WEBPACK=true next dev

[ayonix]

.env is checked in in the host-app.
I've tried it with:

• Powershell ($env:NEXT_PRIVATE_LOCAL_WEBPACK=$true && npm run build)
• cmd (SET NEXT_PRIVATE_LOCAL_WEBPACK=true && npm run build)
• git bash (NEXT_PRIVATE_LOCAL_WEBPACK=true npm run build)
• wsl (NEXT_PRIVATE_LOCAL_WEBPACK=true npm run build)
• cross-env (cross-env NEXT_PRIVATE_LOCAL_WEBPACK=true next build in package.json)

as well as all of those with npx next build instead of npm run build, always the same error.

[ScriptedAlchemy]

May I know if you are using the Windows operating system? There is currently an open issue regarding path normalization, and a pull request has been submitted to resolve this issue. However, it has not yet been merged into the codebase. The resolution is expected to be implemented next week. In the meantime, you can review the normalization pull request and apply a patch to your local package if necessary.

[ayonix]

Yes I am using windows, I'll wait then, thanks.
Edit: waiting for #1997

[github-actions]

Stale issue message