Styles broken in CRA Production Build but work fine in development mode

My CRA-based PWA application with emotion styles works perfectly during development yarn start, however when built for production yarn build and served, the styles are missing when inspected in the browser. The HTML is correctly formed with references to style names (same as dev build), but the style object does not exist in the execution environment context.

I do not (yet) have a pared-down example to reproduce but will work toward that. I am posting this as inquiry to see if anybody else has come across this issue for potential pointers as to causes and/or resolution. I’ve read potential issues with importing .css files so tried removing all those, but get the same results. I do not see any errors emitted to the console/log.

• @emotion/react version: 11.1.4
• @emotion/styled version: 11.0.0
• react version: 17.0.1
• react-scripts version: 4.0.1
• typescript version: ^4.1.3

[n8sabes]

Wrapping the app in a CacheProvider worked! Thank you @Andarist.

Should I close this issue, or is there something to be done to improve the library (e.g. context overwriting, naming convention, etc.)?

[zhdanouskikh]

Are there any updates on how to fix this issue? For me it reproduced only in mobile Safari and I wrapped the app in CacheProvider.

I’m using emotion with mui 5 and tss-react.