Emotion: TS2322: Property 'css' does not exist...

[peterschussheim]

• emotion: version: 10.0.7
• emotion-theming: 10.0.7
• @emotion/core: version: 10.0.7
• @emotion/styled: version: 10.0.7
• @emotion/cache: version: 10.0.
• react version: 16.7.0
• typescript version: 3.2.4

Relevant code:

tsconfig.json:

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "allowUnreachableCode": false,
    "checkJs": false,
    "downlevelIteration": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "preserve",
    "lib": ["webworker", "esnext", "dom"],
    "module": "esnext",
    "moduleResolution": "node",
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": false,
    "noImplicitReturns": true,
    "noImplicitThis": false,
    "noUnusedLocals": false,
    "outDir": "./build/",
    "pretty": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": false,
    "strictNullChecks": false,
    "suppressImplicitAnyIndexErrors": true,
    "target": "esnext",
    "types": ["@emotion/core", "jest", "node", "webpack-env"]
  },
  "include": ["./src/**/*", "./monaco.d.ts"],
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "gamma.config.js"
  ]
}

Example TS error:

 TS2322: Type '{ children: Element; css: SerializedStyles; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
Property 'css' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.

pragma

/** @jsx jsx */
import { jsx, css } from '@emotion/core'
import * as React from 'react'
...

Related Issues:

• https://github.com/emotion-js/emotion/issues/693

[nhooyr]

I fixed this by changing my tsconfig.json to:

{
  "compilerOptions": {
    "types": ["@emotion/core"]
  }
}

[andrewlsimplisafe]

Ran into the same issue. If you have already tried @nhooyr 's solution and still get errors. The next step would be a fresh install of dependencies. (npm install or yarn install). If that doesn't work, try nuking (deleting) the node_modules folder and do a fresh reinstall then reload your IDE / text editor

[kingerez]

I'm still getting the same error, none of the above helped... I'm have a freshly created an app using
npx create-react-app --typescript
I made the change to tsconfig.json, completely deleted node_modules, reinstalled and restarted my IDE, without success.
What did work, was a manual edit of the index.d.ts file in node_modules/@types/react, which is suboptimal for obvious reasons.

[havenchyk]

If it helps somehow, you can create custom type declaration like next one

// @types/react/index.d.ts
declare module "react" {
  interface Attributes {
      css?: any;
  }
}

and specify in typeRoots: ['./@types', './node_modules/@types'], order matters!

[luisrodriguez-cbsinteractive]

I keep getting the not found error even thought the definitions is in the same file.
I converting my js files to tsx typescript as used in my office

/Users/lrodr0923/repos/brackets/src/App.tsx
TypeScript error in /Users/lrodr0923/repos/brackets/src/App.tsx(34,6):
Type '{ teamName: string; coachName: string; cardDate: string; teamDescription: string; actions: { id: number; label: Element; }[]; }' is not assignable to type 'IntrinsicAttributes & IBrackets'.
Property 'teamName' does not exist on type 'IntrinsicAttributes & IBrackets'. TS2322

32 | 
33 |   return (

34 | | ^
35 | teamName="{teamRecord.teamName}"
KEEPS TELLING ME, THE VARIABLE IS NOT FOUND, but the definition is there.
36 | coachName={teamRecord.coachName}
37 | cardDate={cardDate}

and this is what the interface definition looks like:
interface IBracket {
id: number;
logoUrl: string,
teamName: string,
coach: string,
season: string,
seasonDetails: {
overallRecord: string,
gamesWon: number,
gamesLost: number,
}
playersLost:[
{
firstname: string
lastname: string
age: number
position: ""
}
]
playersGained:[
{
firstname: string
lastname: string
age: number
position: ""
}
]
}

interface IBrackets {
brackets: IBracket[];
}

Thanks for helping

[MarcStdt]

Are there any updates on this issue? I am still getting this problem. Is a special tsconfig required?

Edit:
It work with a basic create-react-app setup, but it stops working, when I am importing an npm package, which includes emotion components.
Sadly I don't have deep enough knowledge of emotion or typescript to make something about that.

[Andarist]

Closing this as no runnable repro case has been provided on which I could take a look at. That being said: I believe that when using @jsx pragma with the upcoming Emotion v11 such problems shouldn't appear as the declaration for css should just be loaded together with the jsx factory.

[MegaCookie]

For Emotion 11 use the following configuration in your tsconfig.json until TypeScript 4.1 comes out:

{
  "compilerOptions": {
    "types": ["@emotion/react/types/css-prop"]
  }
}

Documentation: https://emotion.sh/docs/emotion-11#css-prop-types

[floroz]

For Emotion 11 use the following configuration in your tsconfig.json until TypeScript 4.1 comes out:

{
  "compilerOptions": {
    "types": ["@emotion/react/types/css-prop"]
  }
}

Documentation: https://emotion.sh/docs/emotion-11#css-prop-types

thanks that worked for me!

[Vadorequest]

For me, it was adding /// <reference types="@emotion/react/types/css-prop" /> to next-env.d.ts file. See https://emotion.sh/docs/emotion-11#css-prop-types

See https://github.com/UnlyEd/next-right-now/commit/2a3c89dad00cf212929a54b8d4bb2d14f0677af5

[saulpalv]

React 17 with Typescript 4.2 and Emotion.js 11.1 setup

Just add the following line to react-app-env.d.ts as stated in https://emotion.sh/docs/emotion-11
/// <reference types="@emotion/react/types/css-prop" />

and import with

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react'

in tsconfig.json make shure to have "jsx": "react-jsx"

[santyclaz]

TL;DR: for React 17, Typescript 4.2, Emotion 11.1

tsconfig.json

{
  "compilerOptions": {
    ...
    "jsx": "react-jsx",
    "jsxImportSource": "@emotion/react",
    ...
  }
}

This seems to be the cleanest solution that works for me that does NOT require:

1. adding a /// <reference types="@emotion/react/types/css-prop" /> to a .d.ts file
2. adding a /** @jsxImportSource @emotion/react */ with any imports

See: Emotion TypeScript css prop docs

---

Additional Context:

Prior comments and the Emotion 11 docs linked in prior comments seemed to suggest that upgrading to a version of TypeScript > 4.1 would somehow resolve this issue (and by "resolve" I presumed this would mean removing the need for either the suggested tsconfig.json changes, or the other change suggested by a few others above on adding a /// <reference types="@emotion/react/types/css-prop" /> line in some .d.ts file in your codebase. Unfortunately this doesn't seem to be case.