In module federation with React and SSR, remote modules are not working properly

[thanhiro]

Current Behavior

When using React-specific instructions from https://nx.dev/recipes/react/module-federation-with-ssr and running store host, remote checkout is not rendered in SSR. Instead, first remote, product is shown in it's place, before it gets replaced by CSRed checkout.

Expected Behavior

Remote checkout should be rendered in SSR.

GitHub Repo

No response

Steps to Reproduce

1. Create worksplace with nx@next
2. nx g @nx/angular:host store --ssr --remotes=product,checkout
3. nx serve store
4. Open http://localhost:4200/checkout

Nx Report

Node   : 18.18.0
   OS     : darwin-arm64
   pnpm   : 8.8.0

   nx                 : 17.0.0-beta.8
   @nx/js             : 17.0.0-beta.8
   @nx/jest           : 17.0.0-beta.8
   @nx/eslint         : 17.0.0-beta.8
   @nx/workspace      : 17.0.0-beta.8
   @nx/cypress        : 17.0.0-beta.8
   @nx/devkit         : 17.0.0-beta.8
   @nx/eslint-plugin  : 17.0.0-beta.8
   @nx/react          : 17.0.0-beta.8
   @nrwl/tao          : 17.0.0-beta.8
   @nx/web            : 17.0.0-beta.8
   @nx/webpack        : 17.0.0-beta.8
   typescript         : 5.1.6

Failure Logs

No response

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

No response

[thanhiro]

Also if you choose default (CSS )when generating remotes, CSS modules in remotes are failing in SSR when you try to use them inside remote component.

[xiongemi]

@thanhiro this could possibly be fixed in PR #19565
could you try again with the latest nx (v17 without beta)?

[thanhiro]

Unfortunately, it's not working with 17.0.2 either. Migrated my workspace and then, to be sure, recreated host and remotes. Still same behaviour, wrong (the first in list) federated module gets rendered.

   Node   : 18.18.0
   OS     : darwin-arm64
   pnpm   : 8.8.0

   nx                 : 17.0.2
   @nx/js             : 17.0.2
   @nx/jest           : 17.0.2
   @nx/linter         : 17.0.2
   @nx/eslint         : 17.0.2
   @nx/workspace      : 17.0.2
   @nx/cypress        : 17.0.2
   @nx/devkit         : 17.0.2
   @nx/eslint-plugin  : 17.0.2
   @nx/react          : 17.0.2
   @nrwl/tao          : 17.0.2
   @nx/web            : 17.0.2
   @nx/webpack        : 17.0.2
   typescript         : 5.1.6

[xiongemi]

hey @thanhiro, in the all your tsconfig.server.json, under all the remotes and host, do you have these types "@nx/react/typings/cssmodule.d.ts"and "@nx/react/typings/image.d.ts":

  "compilerOptions": {
...
    "types": [
      "node",
      "@nx/react/typings/cssmodule.d.ts",
      "@nx/react/typings/image.d.ts"
    ]
  },

this should fix your css error?
what kind of error message you got when you try to serve up the app?

[thanhiro]

Yes, those types are defined. But when I even try to import a CSS module in federated SSR, there's this error:

ReferenceError: document is not defined
while loading "./Module" from 19
at findStylesheet (node-federation-loader-checkout.vm:234:36)
at node-federation-loader-checkout.vm:251:17
at new Promise ()
at loadStylesheet (node-federation-loader-checkout.vm:248:20)
at Object.webpack_require.f.miniCss (node-federation-loader-checkout.vm:264:58)
at node-federation-loader-checkout.vm:113:40
at Array.reduce ()
at Function.webpack_require.e (node-federation-loader-checkout.vm:112:67)
at Object../Module (node-federation-loader-checkout.vm:10:30)
at Object.get (node-federation-loader-checkout.vm:17:23)

[xiongemi]

@thanhiro i tried latest nx with ssr example out of the box, it seems fine. do you have a repo for this error?

[thanhiro]

Yet again I recreated everything, with 17.0.3, and like documentation suggests. And the behaviour is exactly the same.

1. When opening checkout page, it actually SSRs product module, not checkout module.
2. If trying to use CSS module classes in code, SSR rendering fails with aforementioned error. (CSR works there as well)

My repo here: https://github.com/thanhiro/nx-example/

[xiongemi]

@thanhiro i checkout your repo. when i ran npx nx serve store, i can open the http://localhost:4200/checkout and it does open the ckecout page.

also, i saw you changed the background of product page, which runs fine:

[thanhiro]

Are you sure they are properly server-side rendered? CSR is working for me, and if JavaScript is enabled, pages are replaced by proper version by client-side React. But SSRing is failing. 🤷🏻

[thanhiro]

I see that when JS is disabled. Also in /checkout route, as it tries to execute broken product module.

[xiongemi]

i see. i am able to replicate it now. i think this issue is related to webpack-contrib/mini-css-extract-plugin#90. the nx webpack config uses plugin mini-css-extract-plugin under the hood.

[thanhiro]

Hi, please note that CSS bug is actually not the original topic why I filed this issue, just something I noted as an additional problem when generating SSR + MF applications as instructed.

Upgraded to 17.1.2 and the original problem still persist and wrong module gets rendered in server, so problem lies in how federated modules are resolved server side.

[github-actions]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs.
If we missed this issue please reply to keep it active.
Thanks for being a part of the Nx community! 🙏

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.