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:

• CSS prop incompatible with typescript #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 | <Card
| ^
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.

[JesseVelden]

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 UnlyEd/next-right-now@2a3c89d

[3xau1o]

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.

[tianhuil]

What do you do if you're already using typeRoots in tsconfig.json, which isn't compatible with types?

[bwittenberg]

With [email protected], [email protected], and all storybook imports at v6.5.9, the issue is resolved when referencing the emotion types in a global .d.ts file.

Filename: global.d.ts

/// <reference types="@emotion/react/types/css-prop" />

// other global type declarations

I tried using the types typescript compiler option, but this caused other errors, probably because our repo relies on other @types packages, and the docs for this config option state "If types is specified, only packages listed will be included in the global scope.".

I also couldn't use the React 17 tsconfig options because we are still on React 16.

Hope this helps someone else!

[holylander]

Hi guys,
in my case it was a matter of first, updating typesdcript config so it allows such prop:

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

and then update my babel config so it transpiles the styles declared in the prop:

presets: [
                            [
                                '@babel/preset-react',
                                {
                                    // https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#manual-babel-setup
                                    runtime: 'automatic',
                                    importSource: "@emotion/react"
                                }
                            ]
                        ],

                        plugins: [
                            '@emotion',
                        ],
]

[RV12R]

Add { "compilerOptions": { "types": ["@emotion/react/types/css-prop"] } } to tsconfig.json
We can't make changes like this /// <reference types="@emotion/react/types/css-prop" /> to next-env.d.ts

This fixed for me their full Documentations on CSS: https://emotion.sh/docs/@emotion/babel-preset-css-prop

[RV12R]

Or update this npm install --save @emotion/css

[SRochas]

With [email protected], [email protected], @emotion/[email protected], TypeScript in strict mode:

My use-case is slightly different as I'm building components whose types extend the HTMLAttributes of basic types. Before upgrading @emotion/react (from @emotion/[email protected]), the css prop was included in my type when I extended the HTMLAttributes for the given type. After the upgrade, I had to convert the following:

export interface TextboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
...

const Textbox = ({ 
    css, // TS2322: Property `css` does not exist
    ...

to include the css prop manually. I guess the prop is no longer found in React.InputHTMLAttributes<HTMLInputElement> anymore, or perhaps something was misconfigured in my solution before the upgrade and the upgrade exposed the issue?

Regardless, this code fixed my issue:

import type { CSSObject } from '@emotion/react';

export interface TextboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'css'> {
    css?: CSSObject;
...

const Textbox = ({ 
    css, // Fixed
    ...

[Andarist]

@SRochas Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.

[prodev711]

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

This is work for me without error.

[Risyandi]

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

good solutions by adding this config currently working fine.

[takayui0921]

just add. /** @jsxImportSource @emotion/react */ 　to the component that's having this error.
it worked for me! no need to change your tsconfig.json.

[NicholasTaylor]

I know this is closed, but just leaving a helpful note for anyone that might come across this. If your linter is complaining about this error, but your site loads fine while running npm run dev, your main tsconfig.json might be configured right, but the linter's config might need similar tweaks.

First, check if that's the case by opening tsconfig.json. Look for a property called references. If it looks something like this, you may have a little more work left to do:

"references": [
  { "path": "./tsconfig.app.json" },
  { "path": "./tsconfig.node.json" }
]

Open tsconfig.app.json. There should be a section of this json with a header comment saying /* Linting*/ Anywhere in this section, just put in the following property:
"jsxImportSource": "@emotion/react",

Then, just save and reload your IDE. The linter should stop complaining at that point.