App crashing while using lazy loading in MFE

[asit-prakash]

Hello, I am referring to your example to create micro frontend applications inside nx monorepo. When I am using lazy loading inside MFEs application crashes and starts infinite reloading. Can you please help me with this? While inspecting the error in the network tab I found one request is failing. I attached the screenshot below.

[mgmarlow]

Sure. Do you mean there's an issue when lazy loading the micro frontends? A code example would help me diagnose the issue.

The screenshot looks like an error w/ hot module replacement (see .hot-update.json extension). That may be unrelated.

[asit-prakash]

When I am trying to lazy load a component inside an MFE app there I am facing this error. Here you can check the source code. https://github.com/asit-prakash/nx-microfrontend-lazy

[mgmarlow]

Ah, I see you're lazy-loading a component within a micro frontend itself:

const LazyComp = lazy(() => import('./LazyComp'));

const App = () => {
  return (
    <div>
      Micro App
      <Suspense fallback="Loading">
        <LazyComp />
      </Suspense>
    </div>
  );
};

There's no way to achieve this w/ how the MicroFrontend component is currently written. The reason being that the MicroFrontend component assumes that a single micro frontend application is compiled into a single JS bundle (in other words, not chunked) for simplicity. You can see a similar strategy outlined in react-app-rewired-micro-frontends, where the author explains,

[...] code splitting is enabled by default, so your application will be split into several 'chunks' which can be loaded onto the page indepedently. This makes it much more difficult to dynamically download the required scripts into an HTML file other than the one that react-scripts generates. So this rewiring puts things back into a single chunk.

Lazy loading a component requires code splitting.

IMO there's not much of a use-case for lazy-loading within a micro frontend itself--micro frontends are meant to be small, independent web applications. If you want to lazy-load for routing, the routing should instead be handled by the micro frontend container.

[asit-prakash]

@mgmarlow Thanks a lot for this explanation, actually my microfrontend might become a little heavy that's why I wanted to have a route-based code splitting but as you suggested this is something I can't achieve using the current approach. I will instead handle the code splitting in the container only.

Thanks again for your time :)