Custom CacheProvider not consistently being applied to imported component libraries using emotion.

[jmdarling]

Current behavior:

My custom CacheProvider is not consistently "grabbing" styles imported from a library, resulting in injected <style> tags not having the expected data-emotion attribute and nonce attribute.

To reproduce:

Reproduction repository: https://github.com/jmdarling/emotion-library-caching-issue

1. Clone the repository: git clone https://github.com/jmdarling/emotion-library-caching-issue
2. Install dependencies: npm install
3. Build the library: npm run build
4. Start the development server: npm run dev
5. Open your browser and navigate to http://localhost:5173

Expected behavior:

My custom CacheProvider will properly "grab" styles imported from a library and I will see the correct data-emotion attribute and nonce attribute on injected <style> tags.

Environment information:

• react version: 18.2.0
• @emotion/react version: 11.11.4

[sshishov]

We have the same issue, but instead of CacheProvider we are using:

createEmotion({key: 'default', nonce: 'nonce'}).css(styleObj);

Somehow we are getting some elements with key='css' and without nonce

[Andarist]

@jmdarling most likely you end up with multiple copies of @emotion/react used in your app

@sshishov you'd have to create a repro for the problem and the separate issue for it to get further help on this one

[jmdarling]

@Andarist - I validated in my reproduction shared in this ticket that there is only a single copy of @emotion/react. That was the first thing I thought too, but no dice.

[uladzimirdev]

@Andarist happens to us with Mantine v6, I double checked and the only version of @emotion/react is used. At the same time mantine/styles reexports createEmotionCache

[uladzimirdev]

@jmdarling did you find any workaround?