module-federation-examples icon indicating copy to clipboard operation
module-federation-examples copied to clipboard

Published 20 hours ago • verified publisher icon module-federation

Improve nextjs demo

Open nodkz opened this issue 3 years ago • 2 comments

Make nextjs demo app more like a real app

  • [x] Add any Component library (used [email protected] for home, shop & 4.20.0 for checkout)
  • [x] Add menu
  • [x] Realize menu loading from another app
  • [ ] Improve pages content
  • [ ] Add images loading from other apps
  • [ ] Add react-intl with translation loading

Known errors

  • [ ] localhost:3000 -> localhost:3000/testRemoteHook produces Shared module 'react' doesn't exist in shared scope default
  • [ ] menu does not restore back in host app. localhost:3000/shop -> / keep shop menu but must show home menu

nodkz avatar Aug 05 '22 20:08 nodkz

CLA assistant check
All committers have signed the CLA.

CLAassistant avatar Aug 05 '22 20:08 CLAassistant

@ScriptedAlchemy could you please take a look at the problem Shared module 'react' doesn't exist in shared scope default

https://user-images.githubusercontent.com/1946920/183276433-016abb8a-20d3-4af7-b374-62038c49ef33.mov

If we reload the page, on first start they it works, but checkout app will get an error

https://user-images.githubusercontent.com/1946920/183276465-a13d6be7-55a8-45ec-876b-8b7a3d04840f.mov

nodkz avatar Aug 07 '22 05:08 nodkz

hey yeah i can take a look

ScriptedAlchemy avatar Aug 11 '22 20:08 ScriptedAlchemy

okay the sharing problem looks to be related to how next.js creates pages. The main webpack runtime expects to initialize all modules/remote improrts. Webpack container reference module id is in aother chunk/page, so in browser it logs a warning about init external failed. Then when you click on the page, the remote is found, loaded, and calls get - since init should have happened a startup.

This is a problem with multi entrypoint apps. But we can workaround it by manually re initialize it when its promise is resolving for the first time.

ScriptedAlchemy avatar Aug 12 '22 02:08 ScriptedAlchemy

@nodkz is attempting to deploy a commit to the Module Federation Team on Vercel.

A member of the Team first needs to authorize it.

vercel[bot] avatar Aug 14 '22 13:08 vercel[bot]

@ScriptedAlchemy I played with a workaround for several hours without luck. It seems that I'm not ready to solve such kinds of problems yet. I'll wait for a fix from you ;)

So I'll try to focus on other aspects: I found a new issue with remote assets and prepared a demo for this case. I already have a solution for it (fix url-loader & image-loader for sidecar), but I do not receive the invite to nexjs-mf repo to make a PR.

https://user-images.githubusercontent.com/1946920/184540052-6b00c54e-86d9-4f5f-830f-051cb37d6e84.mov

nodkz avatar Aug 14 '22 13:08 nodkz

issueing a fix

ScriptedAlchemy avatar Aug 17 '22 19:08 ScriptedAlchemy

@nodkz PR open for the plugin here: https://github.com/module-federation/nextjs-mf/pull/93

ScriptedAlchemy avatar Aug 17 '22 19:08 ScriptedAlchemy