CacheProvider not used in production #2902
Description
Current behavior:
We are using a custom cache and CacheProvider in our client-side rendered SPA so that <style> tags can be injected into the <head> (because the default implementation is to use insertRule).
In development mode, this works great, I see zillions of <style> tags in the head. However, when deploying to production, I see one empty style tag in the dom: <style data-emotion="css" data-s=""></style>. It's as if our CacheProvider is being completely ignored in production.
To reproduce:
const muiTheme = createTheme();
const cache = createCache({ key: 'css', container: document.head });
export const AppContainer: React.FC = () => (
<CacheProvider value={cache}>
<ThemeProvider theme={muiTheme}>
<App/>
</ThemeProvider>
</CacheProvider>
);
- Do a build with
NODE_ENV = "development", observe<style>ttags in the head - Do a build wit
NODE_ENV = "production", observe there are no<style>tags in the head
Expected behavior:
I expect the CacheProvider to work in production the same way it does in development
Environment information:
reactversion: 17.0.2@emotion/reactversion: 11.9.3