`EmotionCache` type mismatch

[amoore108]

Current behavior:

Using Emotion 11.12.0 with TypeScript appears to have introduced a type mismatch with the EmotionCache type.

The createCache function returns an EmotionCache type, which is exported in @emotion/utils. Its shape is:

export type EmotionCache = {
    inserted: Record<string, string | true | undefined>;
    registered: RegisteredCache;
    sheet: StyleSheet;
    key: string;
    compat?: true;
    nonce?: string;
    insert: (selector: string, serialized: SerializedStyles, sheet: StyleSheet, shouldCache: boolean) => string | void;
};

The createEmotionServer function from @emotion/server/create-instance takes the cache as an argument, but throws a type error:

Types of property 'inserted' are incompatible.
    Type 'Record<string, string | true | undefined>' is not assignable to type '{ [key: string]: string | true; }'.
      'string' index signatures are incompatible.
        Type 'string | true | undefined' is not assignable to type 'string | true'.
          Type 'undefined' is not assignable to type 'string | true'.ts(2345)

createEmotionServer is expecting an EmotionCache type in @emotion/server/node_modules/@emotion/utils. It has the shape:

export interface EmotionCache {
  inserted: {
    [key: string]: string | true
  }
  registered: RegisteredCache
  sheet: StyleSheet
  key: string
  compat?: true
  nonce?: string
  insert(
    selector: string,
    serialized: SerializedStyles,
    sheet: StyleSheet,
    shouldCache: boolean
  ): string | void
}

You can see the inserted type is mismatched

To reproduce:

1. Install Emotion with version 11.12.0, along with TypeScript
2. Create a new TS / TSX file
3. Create an Emotion cache with createCache from @emotion/cache
4. Pass this cache into createEmotionServer from @emotion/server/create-instance
5. Observe a type error

Expected behavior:

No type errors thrown when passing in a cache into createEmotionServer

Environment information:

• react version: 18.3.1
• @emotion/react version: 11.12.0

[Andarist]

For some reason, you have multiple versions of @emotion/utils installed there. Your package manager clinged in one place to what it already had installed before. I'd purge @emotion/utils entries from ur lockfile and reinstall the project - that should fix the issue.

[amoore108]

Thanks, that seemed to be the issue!