Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS for federated components is not loading server side on module-federation/nextjs-mf v7 or v8 #3318

Open
K-Cheddar opened this issue Nov 10, 2023 · 4 comments

Comments

@K-Cheddar
Copy link

K-Cheddar commented Nov 10, 2023

I demonstrated this using the examples repo. The below screenshots and video show "this is from checkout!" becomes red after load, resulting in a flash of unstyled content. This was demonstrated by forking the repo: https://github.com/K-Cheddar/module-federation-examples/tree/master/nextjs-ssr

Before JS loads:
Screenshot 2023-11-10 at 10 21 40 AM

After JS loads:
Screenshot 2023-11-10 at 10 21 54 AM

Video:
v8fouc

The chunks that should include the css on the server is an empty array:

Screenshot 2023-11-10 at 11 14 09 AM

This is all run with the dependencies as given in the examples repo:

  "dependencies": {
    "@module-federation/nextjs-mf": "^8.1.0-canary.1",
    "lodash": "4.17.21",
    "next": "^13.5.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "webpack": "5.89.0"
  }

Also happens in 7.x and 8.1.0-canary.5

@ScriptedAlchemy
Copy link
Member

is this in production mode? dev mode doesnt flush css chunks as its style-loader

@K-Cheddar
Copy link
Author

Yes, this is in production mode.

@ScriptedAlchemy
Copy link
Member

Okay. We are rewriting federation and will circle back to this after rewrite.

@K-Cheddar
Copy link
Author

Thanks for letting me know. Do you have a rough eta for when you plan to release the rewrite?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants