Estoy intentando agregar carga diferida para algunos componentes de React para el servicio de microfrontend. Se bloquea debido a la carga del microservicio desde el contenedor principal. Mientras el contenedor principal funciona, veo una ventana de bloqueo en el lugar donde se debe montar el microservicio y errores en la consola de DevTools. En el equipo lo usamos create-react-appy lo parcheamos CRACO, aquí está CRACOla configuración si es necesario:

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') },
  ],
};

Aquí están los errores de la consola de DevTools:

Error al cargar fragmentos

Aquí está mi estructura de construcción:

estructura de construcción

Mi 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"
}

Y mi 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"
  ]
}

Todo se está construyendo y funcionando bien mientras la carga diferida está desactivada (llamada importación de ciertos componentes en el archivo de enrutamiento). El uso lazyde React bloquea el servicio de microfrontend.

Ya intenté agregar <base href="/">una etiqueta en index.htmlhead-tag, pero no ayudó. Intenté eliminar rel="stylesheet"el atributo en el enlace main.css; falla los estilos y aún no funciona.