Emotion: Property css doesn't exist

[Emiliano-Bucci]

Hi! After upgrading emotion to version 11 - and updating all imports using the eslint plugins, i start to get a type issue -> Property 'css' does not exist on every html element where i use the css prop. An error example in a span element:
Property 'css' does not exist on type 'DetailedHTMLProps, HTMLSpanElement>'

I've already try to remove package-lock json and node_modules and also update to the latest version the @react/types dep and typescript, and install again but without luck :/

For the moment i fix it by adding the following to a global.d.ts file:

import 'react'

declare module 'react' {
  interface Attributes {
    css?: Interpolation<Theme>
  }
}

PS: Sadly i cannot share the repo as is a private one

[Andarist]

It depends on how do you consume our JSX factories (classic vs runtime, pragma vs Babel plugin/preset) and what version of TS are you currently using. This has been mentioned in the Emotion 11 post: https://emotion.sh/docs/emotion-11#css-prop-types

[Emiliano-Bucci]

@Andarist I miss that doc, sorry, and thanks for the clarification :)

[jstaro]

Sorry for commenting in a closed thread, but I get this error in a React 17 project (working workaround: adding that ambient /// reference eyesore) even though I'm using TS 4.1.2 and the following babel.config.js:

//...

const presets = [
  //...
  [
    '@babel/preset-react',
    {
       runtime: 'automatic',
       importSource: '@emotion/react',
    },
  ],
  '@babel/preset-typescript'
];

const plugins = [
  // ...
  '@emotion/babel-plugin'
];

//...

[Andarist]

Could you prepare a repro case? Would be a lot easier if I could look at your setup.