[Nextjs plugin] Error: Shared module next/router doesn't exist in shared scope default

[akifunal]

Getting this error when trying to use the NextJs(13.5.1, 13.5.2) pages router with @module-federation/nextjs-mf

Error: Shared module next/router doesn't exist in shared scope default
at w (/Users/test/Projects/tom-fe-core/apps/template-host/.next/server/webpack-runtime.js:1:11882)
at /Users/test/Projects/tom-fe-core/apps/template-host/.next/server/webpack-runtime.js:1:12360
at /Users/test/Projects/tom-fe-core/apps/template-host/.next/server/webpack-runtime.js:1:12295
at 1819 (/Users/test/Projects/tom-fe-core/apps/template-host/.next/server/webpack-runtime.js:1:12682)
at /Users/test/Projects/tom-fe-core/apps/template-host/.next/server/webpack-runtime.js:1:13759
at Array.forEach (<anonymous>)
at __webpack_require__.getEagerSharedForChunkId (/Users/test/Projects/tom-fe-core/apps/template-host/.next/server/webpack-runtime.js:1:13157)
at /Users/test/Projects/tom-fe-core/apps/template-host/.next/server/pages/index.js:8:7788
at Object.<anonymous> (/Users/test/Projects/tom-fe-core/apps/template-host/.next/server/pages/index.js:8:8077)
at Module._compile (node:internal/modules/cjs/loader:1256:14)

This issue does not seem to appear in NextJS version 13.4.19 or below.

[RexGalicie]

@ScriptedAlchemy I can confirm faced same issue

[ScriptedAlchemy]

stay on older version for now

[ScriptedAlchemy]

1268 this should fix it, but its still undergoing testing and ive not yet pushed a prerelease to npm.

[ScriptedAlchemy]

You can try next tag on npm now, it should be better prerelease

[akifunal]

I'm getting errors for not defining remotes. I want to go for dynamic remote route.

Error [TypeError]: __webpack_require__.f.remotes is not a function

My NextFederationPlugin config in nextjs.config looks like this;

new NextFederationPlugin({
    name: 'template',
    filename: 'static/chunks/remoteEntry.js',
})

[Kishok978]

@akifunal, Please share the following package in the shared scope of your next.config.js or next.config.ts file like this:

 shared: {
      next: {
        requiredVersion: false,
        singleton: true
      }
    }

[akifunal]

@Kishok978, Thank you for suggestion but it didn't work. @module-federation/nextjs-mf is already configured to share Next.js packages, as indicated in the documentation under nextjs-mf#whats-shared-by-default

[RexGalicie]

I'm getting errors for not defining remotes. I want to go for dynamic remote route.

Error [TypeError]: __webpack_require__.f.remotes is not a function

My NextFederationPlugin config in nextjs.config looks like this;

new NextFederationPlugin({
  name: 'template',
  filename: 'static/chunks/remoteEntry.js',
})

Yeah faced same issue during build, on dev mode all good

[ScriptedAlchemy]

@akifunal, Please share the following package in the shared scope of your next.config.js or next.config.ts file like this:

 shared: {

      next: {

        requiredVersion: false,

        singleton: true

      }

    }

Don't do that, if you want that then "next/" but sharing all of next can cause some issues in my testing

[ScriptedAlchemy]

Try the 'next' tag on npm.

[akifunal]

I'm getting errors for not defining remotes. I want to go for dynamic remote route.

Error [TypeError]: __webpack_require__.f.remotes is not a function

My NextFederationPlugin config in nextjs.config looks like this;

new NextFederationPlugin({
  name: 'template',
  filename: 'static/chunks/remoteEntry.js',
})

For dev mode; Still getting error for not defining remotes or with empty remotes key in NextFederationPlugin config. It only works when something defined in remotes. "@module-federation/nextjs-mf": "8.0.1-2"
"next": "13.5.4".

[ScriptedAlchemy]

Yep, patched and shipped in today already for runtime chunk handlers.

[akifunal]

@ScriptedAlchemy, thank you for your hard work. The only problem is that I'm encountering webpack errors when building. I've created a CodeSandbox for it.nextjs13-nextjs-mf

The error looks like this;

(node:1816) [DEP_WEBPACK_MODULE_ID] DeprecationWarning: Module.id: Use new ChunkGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
   Creating an optimized production build  .<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|container entry (default) [["./noop",{"import":["/workspace/node_modules/@module-federation/nextjs-mf/src/federation-noop.js"]}],["./index",{"import":["./pages/index.tsx"]}]]': No serializer registered for ContainerEntryModule
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> ContainerEntryModule
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|consume-shared-module|default|next/image|=13.5.4|false|/workspace/node_modules/next/image.js|true|false': No serializer registered for ConsumeSharedModule
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> ConsumeSharedModule
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|consume-shared-module|default|react/jsx-runtime|=18.2.0|false|/workspace/node_modules/react/jsx-runtime.js|true|false': No serializer registered for ConsumeSharedModule
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> ConsumeSharedModule
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|consume-shared-module|default|next/head|^12 || ^13|false|/workspace/node_modules/next/head.js|true|false': No serializer registered for ConsumeSharedModule
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> ConsumeSharedModule
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|consume-shared-module|default|next/router|^12 || ^13|false|/workspace/node_modules/next/router.js|true|false': No serializer registered for ConsumeSharedModule
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> ConsumeSharedModule
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|consume-shared-module|default|next/link|^12 || ^13|false|/workspace/node_modules/next/link.js|true|false': No serializer registered for ConsumeSharedModule
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> ConsumeSharedModule
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|consume-shared-module|default|next/script|^12 || ^13|false|/workspace/node_modules/next/script.js|true|false': No serializer registered for ConsumeSharedModule
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> ConsumeSharedModule
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|consume-shared-module|default|next/image|^12 || ^13|false|/workspace/node_modules/next/image.js|true|false': No serializer registered for ConsumeSharedModule
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> ConsumeSharedModule
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|consume-shared-module|default|next/dynamic|^12 || ^13|false|/workspace/node_modules/next/dynamic.js|true|false': No serializer registered for ConsumeSharedModule
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> ConsumeSharedModule
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|consume-shared-module|default|react/jsx-dev-runtime|^17 || ^18|false|/workspace/node_modules/react/jsx-dev-runtime.js|true|false': No serializer registered for ConsumeSharedModule
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> ConsumeSharedModule
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|consume-shared-module|default|react/jsx-runtime|^17 || ^18|false|/workspace/node_modules/react/jsx-runtime.js|true|false': No serializer registered for ConsumeSharedModule
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> ConsumeSharedModule
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|consume-shared-module|default|styled-jsx|*|false|/workspace/node_modules/styled-jsx/index.js|true|false': No serializer registered for ConsumeSharedModule
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> ConsumeSharedModule
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|consume-shared-module|default|styled-jsx/style|false|false|/workspace/node_modules/styled-jsx/style.js|true|false': No serializer registered for ConsumeSharedModule
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> ConsumeSharedModule
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|provide module (default) next/image@13.5.4 = /workspace/node_modules/next/image.js': No serializer registered for ProvideSharedModule
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> ProvideSharedModule
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|provide module (default) react/jsx-runtime@18.2.0 = /workspace/node_modules/react/jsx-runtime.js': No serializer registered for ProvideSharedModule
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> ProvideSharedModule
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|provide module (default) next/head@13.5.4 = /workspace/node_modules/next/head.js': No serializer registered for ProvideSharedModule
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> ProvideSharedModule
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|provide module (default) next/router@13.5.4 = /workspace/node_modules/next/router.js': No serializer registered for ProvideSharedModule
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> ProvideSharedModule
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|provide module (default) next/link@13.5.4 = /workspace/node_modules/next/link.js': No serializer registered for ProvideSharedModule
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> ProvideSharedModule
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|provide module (default) next/script@13.5.4 = /workspace/node_modules/next/script.js': No serializer registered for ProvideSharedModule
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> ProvideSharedModule
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|provide module (default) next/dynamic@13.5.4 = /workspace/node_modules/next/dynamic.js': No serializer registered for ProvideSharedModule
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> ProvideSharedModule
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|provide module (default) react/jsx-dev-runtime@18.2.0 = /workspace/node_modules/react/jsx-dev-runtime.js': No serializer registered for ProvideSharedModule
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> ProvideSharedModule
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|provide module (default) styled-jsx@5.1.1 = /workspace/node_modules/styled-jsx/index.js': No serializer registered for ProvideSharedModule
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> ProvideSharedModule
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|provide module (default) styled-jsx/style@5.1.1 = /workspace/node_modules/styled-jsx/style.js': No serializer registered for ProvideSharedModule
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> ProvideSharedModule
Failed to compile.

webpack/runtime/inverted container startup
Module.id: There was no ChunkGraph assigned to the Module for backward-compat (Use the new API)

webpack/runtime/inverted container startup
Module.id: There was no ChunkGraph assigned to the Module for backward-compat (Use the new API)

[ulrichgreen]

Any luck with this? having the exact same errors around serializable cache item's

[ulrichgreen]

Never mind, had accidentally removed NEXT_PRIVATE_LOCAL_WEBPACK=1 from .env in my scrambling around.