Import issues - Cannot find name 'EmotionCache'

[Lollo0101]

Current behavior:
After installing the package in a completely new project it cannot be run (both ng s and ng build) at all, indeed I receive this error:

Application bundle generation failed. [1.957 seconds]

X [ERROR] TS2304: Cannot find name 'EmotionCache'. [plugin angular-compiler]

    node_modules/@emotion/css/dist/declarations/src/index.d.ts:10:63:
      10 │ ...import("./create-instance.js").CSSStyleSheet, cache: EmotionCache;
         ╵                                                         ~~~~~~~~~~~~

To reproduce:

1. Create a new project
2. Install the package using npm i --save @emotion/css
3. Use the css function in any point of the project
4. Run the application

Here's a StackBlitz

Expected behavior:
I expect it will compile and run properly

Environment information:
Completely new project, nothing different set at all

• Angular version: 17.1.2 (18.1.0 in StackBlitz)
• @emotion/react version: 11.13.3 (current latest)

[Andarist]

I can confirm the issue. Upgrading TS and Preconstruct doesn't resolve this. I also tried exporting EmotionCache using different kinds of exports. Some other imports (like RegisteredStyles) don't suffer this. My current suspicion is that it's a race condition in our declaration emit. It might be that @emotion/css is emitted when @emotion/cache is not ready yet. IIRC Preconstruct stubs every package with redirects to src before doing the declaration emit but maybe it's not bullet-proof.

I can take a deeper look into it later but perhaps @emmatown will have some insights into this in the meantime.