Using @emotion/core <Global /> with TypeScript throws an error

[tomsseisums]

• emotion version: 10.0.0-beta.5
• react version: 16.6.0

Relevant code:

<ThemeProvider theme={ theme }>
  <>
    <Global styles={{
      'body': {
        backgroundColor: 'red'
      }
    }} />
    <Layout />
  </>
</ThemeProvider>

What you did:
Attempted to add <Global /> styles with TypeScript.

What happened:

/Users/tomo/projects/ciparo/frontend/node_modules/@types/react/index.d.ts
(134,106): Type 'P' does not satisfy the constraint 'DOMAttributes<T>'.
  Type 'HTMLAttributes<T>' is not assignable to type 'DOMAttributes<T>'.
    Types of property 'css' are incompatible.
      Type 'Interpolation' is not assignable to type 'InterpolationWithTheme<any>'.
        Type 'TemplateStringsArray' is not assignable to type 'InterpolationWithTheme<any>'.
          Type 'TemplateStringsArray' is not assignable to type '(theme: any) => Interpolation<undefined>'.
            Type 'TemplateStringsArray' provides no match for the signature '(theme: any): Interpolation<undefined>'.

Reproduction:

yarn create react-app --scripts-version=react-scripts-ts
yarn add @emotion/core emotion-theming@next

Add <Global /> to App.tsx and it should be there! I haven't tested in exactly that way, but I haven't changed anything of significance in tsconfig.json.

Problem description:
Doesn't work neither with object syntax, nor with css template literal.

Suggested solution:
n/a

[tomsseisums]

Okay, it is something with my config... set up CodeSandbox, worked there. Created a new react-app with TS, and it also worked there.

• My tsconfig.json's are identical.
• The <Global /> doesn't even have to be added to the tree, import causes the error.

Maybe pointers?

[Ailrun]

Thank you for posting this issue!
However, without reproduction, it's quite hard to say where the error occurs...
Could you try to remove your yarn.lock (or remove all parts related with emotion in the file) and to reinstall your dependencies?

[tomsseisums]

Just did rm -rf node_modules yarn.lock and reinstalled, same issue.

[Ailrun]

@joltmode Do you have any old packages like emotion@9 in your dependencies? If that's the case, that can make the issue.

[tomsseisums]

Yup, that was it. Was in middle of migration from v9 to v10..

But I did try an example where I installed v9 alongside, it still worked. So it appears one can have packages, it's when they are imported, that the conflict arises.

[Ailrun]

Yes, problematic type will be imported only when you import one.

[pom421]

For future readers, I had a similar problem with types in my Chakra UI app.

@tomsseisums comment leads me to a solution.

My emotions modules were not at the same version.

I used now "@emotion/core, @emotion/react and @emotion/styled. They were not in sync since emotion/core was used before in my project and was in v10 while emotion/react and emotion/styled was in v11.

With using v11 for emotion/core or like I do, remove it completely and used emotion/react, makes it works now.

Hope this will be useful!

[rezamajidi]

@pom421 I still have this problem when using Chakra UI in my react app. all of them is v11.

[srmagura]

@rezamajidi Make sure you only have one version of @emotion/react and @types/react in your project. If you are still getting the issue and you can create a minimal reproduction, please open a new issue. Thanks.

[rezamajidi]

@srmagura Link of the Sandbox.

The issue is I'm using Chakra UI in a chrome extension app base on React & TS.

React version is 18.0.0 and When I change the react-dom version to 18.0.0 from 17.0.1 and change ReactDOM.render to createRoot, it works fine on the sandbox.

[srmagura]

Hey @rezamajidi, you should always be using the same version of react and react-dom.

[rezamajidi]

@srmagura Yup but a warning error is still available when both using version 18.0.0` when using Chakra UI and it says React behaves like it's on version 17.
You can check sandbox for the error.

[srmagura]

@rezamajidi That seems like a different issue than what this thread is about. What makes you think it is an Emotion issue? It seems more likely that it is caused by Chakra UI. Please create a new Emotion issue if you still get this error without Chakra UI.