nextjs-mf 7 to 8 migration

[denis-guesty]

Describe the bug

I have migrated an app from nextjs-mf 7 to 8 and it seems that all the MF apps stopped working, I wasn't sure what has changed, I did install a local webpack version for MF to use.

I don't see any API changes between 7 and 8, besides the need for local webpack.

App is running using NEXT_PRIVATE_LOCAL_WEBPACK=true next dev

This is the error form the remote apps I am trying to load.

offline Error: Shared module is not available for eager consumption: 15691

If I enable debug, I don't see anything special either.

All the help is much appriciated, thanks!

Reproduction

Migrate nextjs-mf 7 -> 8

Used Package Manager

npm

System Info

"next": "^13.4.12"
"@module-federation/nextjs-mf": "^8.2.3"
"webpack": "^5.90.3"

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.

[denis-guesty]

UPD: If I add react as a shared module I get Cannot read properties of null (reading 'useContext') so app doesn't even compile, I did see in the diff that the default shared has been changed since release of 8, so I thought that this is most likely the issue that I am facing originally.

Edit: I am guessing this is it #1433?

[ScriptedAlchemy]

Don't use app router

[denis-guesty]

We are using pages router, any other possible issues originating from the changes in the default shared packages?

[ScriptedAlchemy]

Can you send screenshot of config and how you are importing a few of the remotes / page code showing how you implement

[ScriptedAlchemy]

We are using pages router, any other possible issues originating from the changes in the default shared packages?

Page router only? Zero app router in project?

[denis-guesty]

Page router only? Zero app router in project?

zero app router in the project. We are using Next 13.

Can you send screenshot of config and how you are importing a few of the remotes / page code showing how you implement
We are building it dynamically via some function. But the end result is something like:

https://{somecloud_distro}/{env}/{micro_app_name}/static/remoteEntry.js?{datetime}

Also I noticed that in nextjs-mf 8 the remote entries stopped being fetched and they are fetched "on-demand" only (basically only if you go to the url of the micro app you want to load), and the timestamp at the end of the remote entry path is gone as well.

Thanks

Edit: If any help needed in order to fix it contribution-wise, I'd be glad to help

[ScriptedAlchemy]

https://{somecloud_distro}/{env}/{micro_app_name}/static/remoteEntry.js?{datetime}

That doesnt look like a server side remote url path, it looks like a browser one.

Next ssr remotes are staic/srr and client is usually static/chunks or something.

Does your remoteEntry contain module.exports at the bottom? is it a commonjs remote?

[ScriptedAlchemy]

We are using pages router, any other possible issues originating from the changes in the default shared packages?

Probbably, are all instances using nextjs-mf v8? or is there still a v7 somewhere in the stack?

[denis-guesty]

Probbably, are all instances using nextjs-mf v8? or is there still a v7 somewhere in the stack?

So at the moment we only have the skeleton app using Next, all the micro-apps that are rendered in the skeleton app are vanilla module federation (all CRA based apps from years ago) using webpack's ModuleFederationPlugin and nextjs-mf (Skeleton app) consumes those.

[denis-guesty]

https://{somecloud_distro}/{env}/{micro_app_name}/static/remoteEntry.js?{datetime}

That doesnt look like a server side remote url path, it looks like a browser one.

Next ssr remotes are staic/srr and client is usually static/chunks or something.

Does your remoteEntry contain module.exports at the bottom? is it a commonjs remote?

I'll check that tomorrow and will get back to you with an answer, thanks.

[ScriptedAlchemy]

Id suggest upgrading those other remotes to module-federation/enhanced

[nick4fake]

Don't use app router

Just to clarify - why is that? Is it not supported? I don't see any references in README

Edit:
Now I see this ticket: #2157
But there is still no mention on the package page: https://www.npmjs.com/package/@module-federation/nextjs-mf