ChunkLoadError: Loading chunk X failed

49 Views Asked by At

Im using create-react-app + craco in microfrontend-side, trying to add lazy-loading for react components and it crashes entire microfrontend app while mounting it. But microfrontend app mounts successfully without lazy-loading. For test, im building microfrontend locally and starting it with command serve -s -p 3001 (it starts on localhost:3001), at the same time im starting main app dev server with yarn start on localhost:3000.

Devtools console errors

Here is craco config:

/* eslint-disable global-require */
const PUBLIC_PATH = '/';
process.env.REACT_APP_BUILD_DATE = new Date().getTime() / 1000;

module.exports = {
  webpack: {
    configure: {
      output: {
        publicPath: PUBLIC_PATH,
        filename: '[name].js',
      },
      // optimization: {
      //    runtimeChunk: 'single',
      //    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') },
  ],
};

I tried to add meta tags for no-cache. Tried to play around with chunks config - and just commented it. Pay attention to path where my main container trying to reach chunks - its port 3000, not 3001 where microfrontend is deployed.

0

There are 0 best solutions below