module-federation-examples icon indicating copy to clipboard operation
module-federation-examples copied to clipboard

shared-routing: Profile page blank on first render in production build

Open mstapp opened this issue 3 years ago • 2 comments

When I create & serve a production build of the shared-routing app (yarn build && yarn serve), the dashboard & orders pages render fine but the profile page is blank for the first render only.

Example flow:

  • Load the app at http://localhost:3000 and when the app loads the dashboard page displays correctly and the path /dashboard is added to the URL.
  • Click the Orders menu and the orders page renders correctly.
  • Click the Profile menu and the entire page goes blank except for the title "Profile". (Even the shell part of the app doesn't re-render on this page.)
  • Wait ~10 seconds to make sure the app is not just being slow, then press the browser's Back button to return to Orders.
  • When I return to the profile page again either via the menu or via the browser's Forward button, the profile page renders correctly.

There are no errors in the browser console at any point in this flow (apart for the expected 404 from the missing favicon.ico).

This only happens in the production build; everything renders fine in the dev build.

I'm on Mac OS X, and this happens in the current versions of both Firefox & Chrome.

Any idea why this happens? I'm not sure if it's a problem with federation, or just something going on with the react side of things.

mstapp avatar Jan 12 '22 15:01 mstapp

Likely not federation and probably an implementation quirk

ScriptedAlchemy avatar Jan 13 '22 06:01 ScriptedAlchemy

I'll pull down this example and look over it again. It's been a while

ScriptedAlchemy avatar Jan 19 '22 07:01 ScriptedAlchemy