-
-
Save ScriptedAlchemy/3a24008ef60adc47fad1af7d3299a063 to your computer and use it in GitHub Desktop.
import { injectScript } from '@module-federation/utilities'; | |
// example of dynamic remote import on server and client | |
const isServer = typeof window === 'undefined'; | |
//could also use | |
// getModule({ | |
// remoteContainer: { | |
// global: 'app2', | |
// url: 'http://localhost:3002/remoteEntry.js', | |
// }, | |
// modulePath: './sample' | |
// }).then((sample) => { | |
// console.log(sample) | |
// }); | |
const dynamicContainer = injectScript({ | |
global: 'checkout', | |
url: `http://localhost:3002/_next/static/${ | |
isServer ? 'ssr' : 'chunks' | |
}/remoteEntry.js`, | |
}).then((container) => { | |
return container.get('./CheckoutTitle').then((factory) => { | |
return factory(); | |
}); | |
}); | |
// if you wanted to use it server side/client side in next.js | |
const DynamicComponent = React.lazy(() => dynamicContainer); | |
// eslint-disable-next-line react/display-name | |
export default (props) => { | |
return ( | |
<> | |
<React.Suspense> | |
<DynamicComponent /> | |
</React.Suspense> | |
<p>Code from GSSP:</p> | |
<pre>{props.code}</pre> | |
</> | |
); | |
}; | |
export async function getServerSideProps() { | |
return { | |
props: { | |
code: (await dynamicContainer).default.toString(), | |
}, | |
}; | |
} |
I think, i found answer in this article - https://dev.to/omher/lets-dynamic-remote-modules-with-webpack-module-federation-2b9m
At the same time, there is no re-rendering with nested loading of modular components.
@shirly-chen-awx Did you ever find a solution to the __webpack_require__.l
is not a function? We are experiencing the same strange behavior.
ensure the file is getting bundled by webpack and not treated as external. @oravecz
that error happens when something is importing it outside webpacks scope
Yes, it was a duplicate of module-federation/core#551
I'm surprised it isn't discussed more, especially on the @module-federation/utilities page. importRemote
is the function that is calling __webpack_require__.l()
, and I would expect any production build using that package would tree-shake away the function without that plugin.
Is this plugin available as an npm published webpack plugin at this time?
Hello. I need your help. I recorded a video (https://www.youtube.com/watch?v=CMA6WciiGso) where I show the problem.
The problem is the following.
I used the function from the post to create a "ComponentLoader" - a special component for loading remote components
I use it here:
everything works fine when I load components at the same level
but when a downloadable component also has a downloadable component - this leads to a lot of re-rendering
it is worth noting that re-rendering is not infinite and sooner or later we all still see the final result
this is how the downloadable components look like
I'm new to wmf - so I really hope for your help
@ScriptedAlchemy 😢