Next.js sidecar with hooks

[Kinbaum]

This example addresses the issue with using hooks in federated components and consuming them in a Next.js application. There is no need to mark React or ReactDOM as external with this example.

[ScriptedAlchemy]

Are you also able to fix the externalized react issue on the original sidecar example?

[Kinbaum]

Yes for sure. Would you like me to open another PR for that one, or replace this one with that change?

[ScriptedAlchemy]

Could the two be merged? showcase hooks and class-based components? It also reduces my maintenance burden as the examples are getting quite long haha

[Kinbaum]

Yeah no problem. I'll combine the two examples and submit them as one in this PR. Thanks

[ScriptedAlchemy]

Appreciate it!

[Kinbaum]

@ScriptedAlchemy I have consolidated the examples. Ready for you to check it out.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
3 out of 6 committers have signed the CLA.

✅ jacob-ebey
✅ ScriptedAlchemy
✅ Kinbaum
❌ remanation
❌ jherr
❌ hanford
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[ScriptedAlchemy]

Will check it out! 🙏

[Kinbaum]

@ScriptedAlchemy Something got messed up. I'm gonna close this and reopen a new one that's cleaner.

[ScriptedAlchemy]

thanks

[Ruchika-saini]

@Kinbaum @ScriptedAlchemy
Is this issue fixed? As I am still facing the issue with hooks.
I am using this package @module-federation/nextjs-mf@2.3.1 in Next JS application to federate a page. But whenever I have React hooks in remote module, I am getting this error "Uncaught Error: Invalid hook call".
Even I have this configuration as well

shared: {
'styled-jsx': {
requiredVersion: false,
singleton: true,
eager: true,
},
react: {
singleton: true,
eager: true,
requiredVersion: false,
},
'react-dom': {
singleton: true,
eager: true,
requiredVersion: false,
},
},

Please help on this issue and clarify if this fix is available in v2.3.1 of @module-federation/nextjs-mf (the latest that is available on the public npm registry).

[ScriptedAlchemy]

@Ruchika-saini you need the commercial version from privjs registry. Not npm