Can a NextJS Remote work in a CRA Host?

[clodal]

Hi,

Would it possible to use a NextJS remote in a Create React App (CRA) host app?

• On the NextJS Remote, I am using @module-federation/nextjs-mf to expose a component which relies on NextJS's useRouter.
• On the CRA Host, I am using craco-mf to connect to the component.

However when running the CRA Host, I am receiving the console error: Uncaught Error: Shared module next/router doesn't exist in shared scope default

Q: How can I resolve this issue? Is this even possible?

References:

• A similar issue was being brought up in a thread within this discussion as well.

Update:

• I am starting to think that I should create a NextJS remote and CRA remote for the same component. Q. Would this be a viable solution?

[brunos3d]

Hello @clodal.

It's a little trickier to use Next.js/Router and other nextjs packages in different abstract scenarios like in a regular CRA app, cause its libs are very coupled to the framework itself, for example, if you want to consume useRouter, you will need to share with it the RouterContext (used internally), then you will need to set up it on your shell app with it respective deps.

You should work with interfaces or some EDDL/Pub-Sub tool that communicates with the router layer of your application.

So you will be able to isolate and decouple the Router as a layer of your app and components that need to manipulate the router/navigation will have an interface to communicate in an abstract way without having a framework/lib a limitation

[spulugam]

Hi @clodal,
Any sample available on RouterContext (router layer ) where React as Host and NextJS as remote app?

thanks

[ScriptedAlchemy]

We are ending support for Next.js #3153