emotion: Missing styles in production (CRA + Emotion 11)
Current behavior:
Successfully updated codebase to emotion 11 (from 9) and using the css prop in conjunction with craco to override the webpack config and use the @emotion/babel-preset-css-prop preset. When running locally in development, all styles are applied properly and everything looks good. When building for production however, it seems like there are styles missing throughout the app.
To reproduce:
I don’t have a repro case as this is in app, I’m hoping I’ve just missed a step or something else obvious.
Environment information:
reactversion: 17.0.1@emotion/reactversion: 11.1.4
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 12
- Comments: 15 (5 by maintainers)
Commits related to this issue
- bump emotion to latest (to take advantage of https://github.com/emotion-js/emotion/issues/2209) — committed to guardian/pinboard by twrichards a year ago
- bump emotion to latest (to take advantage of https://github.com/emotion-js/emotion/issues/2209) — committed to guardian/pinboard by twrichards a year ago
Yes. The exact thing I was suspecting is multiple instances of the
@emotion/cachemodule -@emotion/css&@emotion/reactshares that dependency. It’s hard to tell what exactly has been wrong without inspecting a repro case. If the version of that@emotion/cachewill be the same then there shouldn’t be any problem.Does #2361 fix this issue?
@Andarist - it looks like you are right with the multiple versions. I can’t believe I didn’t try this before, but I removed the one use of
import { css as vanillaCss } from '@emotion/css';from the codebase (which is on that initial page that gets loaded I mentioned), and it’s back to working.I guess my question now becomes, is there any easy way to safely use
@emotion/cssalongside@emotion/react?