This is a quick proof of concept repo for loading esm module with webpack 5 module federation fallbacks.
So you can write these kind of code cross browser :
const HelloWorld = React.lazy(() => import("http://127.0.0.1:3001/esm.js"));
// or
import HelloWorld from "http://127.0.0.1:3001/esm.js";To run the application, navigate to app and remote folder and run npm start.
app folder simulates the application.
remote build the esm package and has a simple http server to serve both esm script and webpack module federation fallback scripts.
HelloWorld component is loaded via esm module. Styles are embeded in the esm module. If no esm module supported, fallback to webpack 5 module federation.
esm script type attribute is set to module so modern browser knows how to handle it. Older browsers does not know what it is so it will be ignored.
webpack module federation scripts are fallback for older browser. It must also have nomodule attribute, so modern browser will ignore these scripts.
URL in the import statement is replaced with correct webpack module federation path at transpile time, using babel-plugin-search-and-replace. Of course it can be done by other plugins in webpack, babel or rollup.
- Smaller bundle size for modern browser.
- Future proof code with clean syntax.
- Only works if using latest webpack.
- Extra webpack, babel and rollup configs.
Snowpack is better solution if you don't want to work with webpack and rollup.