I'm trying to add lazy loading for some React components for microfrontend service. Crashes due to loading the microservice from the parent container. While the main container is running, I see a crash window where the microservice should be mounted and errors in the DevTools console. On the team we use create-react-app and patch it CRACO , here is CRACO the configuration if necessary:
module.exports = {
webpack: {
configure: {
output: {
publicPath: PUBLIC_PATH,
filename: 'static/js/[name].js',
},
optimization: {
runtimeChunk: false,
splitChunks: {
chunks() {
return false;
},
},
},
},
},
plugins: [
{
plugin: {
overrideWebpackConfig: ({ webpackConfig }) => {
webpackConfig.plugins[5].options.filename = 'static/css/[name].css';
webpackConfig.plugins[5].options.moduleFilename = () => 'static/css/main.css';
return webpackConfig;
},
},
options: {},
},
{ plugin: require('@semantic-ui-react/craco-less') },
],
};
Here are the DevTools console errors:
Here is my build structure:
My manifest.json :
{
"short_name": "РНИС.",
"name": "Региональная навигационно-информационная система.",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo384.png",
"type": "image/png",
"sizes": "384x384"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
And my assert-manifest.json :
{
"files": {
"main.css": "/static/css/main.css",
"main.js": "/static/js/main.js",
"static/css/346.8786d74d.chunk.css": "/static/css/346.8786d74d.chunk.css",
"static/js/346.6b252fc4.chunk.js": "/static/js/346.6b252fc4.chunk.js",
"static/css/542.59b5bc14.chunk.css": "/static/css/542.59b5bc14.chunk.css",
"static/js/542.4b0e6a16.chunk.js": "/static/js/542.4b0e6a16.chunk.js",
"static/media/brand-icons.svg": "/static/media/brand-icons.6729d29753e000c17489.svg",
"static/media/icons.svg": "/static/media/icons.62d9dae4e0040e81c980.svg",
"static/media/outline-icons.svg": "/static/media/outline-icons.9c4845b4b41ef40a22fa.svg",
"static/media/icons.eot": "/static/media/icons.a01e3f2d6c83dc3aee17.eot",
"static/media/icons.ttf": "/static/media/icons.c656b8caa454ed19b9a2.ttf",
"static/media/brand-icons.eot": "/static/media/brand-icons.d68fa3e67dbb653a13ce.eot",
"static/media/brand-icons.ttf": "/static/media/brand-icons.65a2fb6d9aaa164b41a0.ttf",
"static/media/brand-icons.woff": "/static/media/brand-icons.cac87dc00c87a5d74711.woff",
"static/media/brand-icons.woff2": "/static/media/brand-icons.278156e41e0ad908cf7f.woff2",
"static/media/icons.woff": "/static/media/icons.425399f81e4ce7cbd967.woff",
"static/media/icons.woff2": "/static/media/icons.38c6d8bab26db77d8c80.woff2",
"static/media/outline-icons.eot": "/static/media/outline-icons.752905fa5edf21fc52a1.eot",
"static/media/outline-icons.ttf": "/static/media/outline-icons.5367103510b27b784827.ttf",
"static/media/flags.png": "/static/media/flags.99f63ae7a743f21ab308.png",
"static/media/outline-icons.woff": "/static/media/outline-icons.ddae9b1ba9b0b42f5880.woff",
"static/media/outline-icons.woff2": "/static/media/outline-icons.687a4990ea22bb1a49d4.woff2",
"static/media/anchor-icon.svg": "/static/media/anchor-icon.ceb26001cd160d914fe93761e020e5a2.svg",
"index.html": "/index.html",
"main.css.map": "/static/css/main.css.map",
"main.js.map": "/static/js/main.js.map",
"346.8786d74d.chunk.css.map": "/static/css/346.8786d74d.chunk.css.map",
"346.6b252fc4.chunk.js.map": "/static/js/346.6b252fc4.chunk.js.map",
"542.59b5bc14.chunk.css.map": "/static/css/542.59b5bc14.chunk.css.map",
"542.4b0e6a16.chunk.js.map": "/static/js/542.4b0e6a16.chunk.js.map"
},
"entrypoints": [
"static/css/main.css",
"static/js/main.js"
]
}
Everything is building and working fine while lazy loading is disabled (called importing certain components into the routing file). lazy use of React crashes the microfrontend service.
I already tried adding <base href="/"> a tag in index.html head-tag, but it didn't help. I tried removing the rel="stylesheet" attribute in the main.css link; fails the styles and still doesn't work.