Webpack 5 production builds have no styles
See original GitHub issueCurrent behavior:
Development build produces styled components like expected, while the production build doesn’t style anything at all, although there are class names added.
I tried both using the css-prop transform preset and the plugin & preset combo like https://emotion.sh/docs/css-prop##babel-preset suggested, but both produce nothing.
The dev build on the other hand is okay with just the preset.
The only Emotion things that I can see in the final build are a
<style data-emotion="css" data-s=""></style>
tag and the css classes, also there are a lot of emotions in the source files, so something did build, its just that that something is probably not appending the style tags into the header ?
To reproduce:
git clone https://github.com/Twiggeh/emotion-no-prod-styles
- run
cd emotion-no-prod-styles/client/ && yarn install && yarn run build
- run
cd ../server && yarn install && node ./src/app.js
Expected behavior:
To get styles outputted for when I use the development build.
Environment information:
react
version: 17.0.1@emotion/react
version: 11.1.5
Issue Analytics
- State:
- Created 3 years ago
- Comments:5 (3 by maintainers)
Top GitHub Comments
You can fix this by removing
@emotion/styled
from your vendors: https://github.com/Twiggeh/emotion-no-prod-styles/blob/9e5c6e2cc7f7708ec0a968cd6ae7de26fbe8df89/client/config/webpack.prod.js#L25I’m not a webpack expert (although I know a pretty decent amount of things about it) so I’m not 100% sure why this happens - I would kinda still expect your module graph to be split correctly~. Especially when I’ve tried to add
@emotion/react
to your vendors as well but that didn’t work.In the webpack docs for
entry
u might find a golden rule though:You break that rule because you expect 2 entry bundles to be injected into a single HTML file (and this breaks stuff). On the other hand - this rule is pretty quickly contradicted in the same doc page when describing what should be done for exactly what you are trying to do: creating a vendors bundle. It describes how you should use
dependOn
: https://webpack.js.org/configuration/entry-context/#dependenciesYou can try this patch to see the issue being fixed:
Without
dependOn
you end up with 2 Emotion runtimes being loaded - there is still an issue there, it just might not manifest itself that easily. I encourage you to use thedependOn
solution as it seems the proper one and more future-proof.