Next Federation 7 Support #961
Description
The next major version of the next integration with module federation.
This is a major rewrite, and removes the majority of dirty hacks that were needed in previous versions.
Lets discuss any upgrade issues here.
Common Issues
__webpack_modules__[moduleId]
This happens when webpack attempts to require a moduleId thats not yet loaded into the module cache at runtime.
Theres two causes ive encountered where this happens in v7
-
your using delegate modules and
importorrequireadditional files - delegates should only dynamic importimport()other modules. This is to preserve the async boundary of the delegate module since i do not hoist its dependency tree into the webpack runtime, if youre requiring other files in the delegate, it needs to be async while webpack fetches the additional chunks -
You are loading the current hosts own remoteEntry.js file. This scenario often happens with nested remotes like A->B->A
You should never load the hosts own remote, the host webpack.js runtime has its own remote interface{get,init}already embedded into it - hosts auto expose the remoteEntry interface as a side effect of booting. If you load the hosts own remote, a conflict arises around webpacks chunk loading global which gets overwritten and chunks end up pushed into the wrong runtime, causing the error.
Hydration Errors
Note on SEO: the HTML is still SSR'd so youre not losing SEO, its during hydration where react throws out the html for a moment then brings it back
next/dynamic converts async imports into sync imports or tracking events. Since federated imports cannot be tracked from a single build, next/dynamic receives a Promise which makes it return null, then set state with the component a few milliseconds later after hydration.
To workaround this, use React.lazy for federation. React.lazy causes react to suspend and wait for the resolve of the promise, dynamic just renders what it can instantly.