CODEWITHSUNDEEP
reactjstypescriptnext.jsemotion
Jonathan Currie
Jonathan Currie

Reputation: 93

What is the proper way to enable the css prop in Emotion 11/Next js 10 apps

The css prop is not recognized at build time. I'm unsure if this is due to misconfiguration of the project, or if this represents a known bug.

Type '{ children: (string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ReactNodeArray | ReactPortal | Element)[]; className: string; css: SerializedStyles; }' is not assignable to type 'IntrinsicAttributes & { theme?: Theme; as?: ElementType; } & ClassAttributes & HTMLAttributes<...> & { ...; }'. Property 'css' does not exist on type 'IntrinsicAttributes & { theme?: Theme; as?: ElementType; } & ClassAttributes & HTMLAttributes<...> & { ...; }'

To reproduce:

https://github.com/jbcurrie/jbcurrie.github.io/tree/next

  1. npm install
  2. open NavMenu.tsx
  3. Inspect Line 18

Expected behavior:

The css prop should be recognized at build time.

Environment information:

Upvotes: 9

Views: 12924

Answers (4)

PedroW21
PedroW21

Reputation: 13

I just wan't to leave some info here, since I can't comment on the accepted answer.

For some reason that I don't now yet, when I choose this option:

{
    "compilerOptions": {
        "jsxImportSource": "@emotion/react"
    }
}

My typescript begin to be conflicted with vite-plugin-svgr types and an error appear, that component type cannot be "Element | Null".

To fix that I just used the second option:

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

Little fix: If I not mantain both of them, my app lose all styles, but if I mantain reference and the jsxImportSource, everything worked fine

Upvotes: 0

GETEM5
GETEM5

Reputation: 43

// @ts-ignore

Add this above the line where you use the css props, this will prevent the error - useful if you rarely use it, not so great if you have them all throughout your app.

Upvotes: -5

KhraKen
KhraKen

Reputation: 31

Here is a working config with emotion and Next.js

npm install @emotion/react @emotion/styled && npm i --save-dev @emotion/babel-plugin

yarn add @emotion/react @emotion/styled && yarn add -D @emotion/babel-plugin

.babelrc

{
  "presets": [
    [
      "next/babel",
      {
        "preset-react": {
          "runtime": "automatic",
          "importSource": "@emotion/react"
        }
      }
    ]
  ],
  "plugins": ["@emotion/babel-plugin"]
}


package.json

"dependencies": {
    "next": "10.1.3",
    "react": "17.0.2",
    "react-dom": "17.0.2"
    "@emotion/react": "^11.1.5",
    "@emotion/styled": "^11.3.0",
},
"devDependencies": {
   "@emotion/babel-plugin": "^11.3.0"
}

Upvotes: 3

juliomalves
juliomalves

Reputation: 50358

If using the automatic runtime, you should be able to fix the issue by adding the following to your tsconfig.json.

{
    "compilerOptions": {
        "jsxImportSource": "@emotion/react"
    }
}

Alternatively, add the following to your next-env.d.ts, which adds support for the css prop globally for all components, when not using the automatic runtime.

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

Check Emotion's TypeScript documentation for more details.

Upvotes: 17

Related Questions