Emotion: TS2322: 'css' does not exist on type 'DetailedHTMLProps...' with new JSX runtime w/ NextJs

[clfhhc]

Current behavior:
I have used NextJs v10.0.1 and emotionJs v11.0.0. I installed the @emotion/babel-plugin and followed the new jsx runtime setup with NextJs in this page.

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

I still get errors when input css properties in the JSX react element.

(JSX attribute) css: SerializedStyles
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>'.ts(2322)

To reproduce:

1. clone this repo: https://github.com/Project-Setup/Nextjs_Ts_Eslint
2. run script in the project folder

nvm use || nvm install
npm install
npm run build

1. get an error on the build step

> [email protected] build
> next build

Failed to compile.

./src/pages/index.tsx:21:12
Type error: 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>'.

  19 |     <div>
  20 |       <Global styles={globalBodyStyles} />
> 21 |       <div css={indexPageStyles}>
     |            ^
  22 |         <h1 css={titleStyles}>Project Setup</h1>
  23 |       </div>
  24 |     </div>
info  - Creating an optimized production build .npm ERR! code 1

Expected behavior:
Babel should map css properties in JSX elements and typescript should not output type error TS2322 for css in JSX elements.

Environment information:

• react version: 17.0.1
• @emotion/react version: 11.0.0
• nextjs version: 10.0.1
• typescript: 4.0.5

[Andarist]

https://github.com/emotion-js/emotion/issues/2106#issuecomment-727562288

[clfhhc]

#2106 (comment)

I read that comment and was following the New JSX runtime and babel-plugin/preset setup, and TS is most updated. (They are listed in the issue description.)

I read this note too, so that's why I did not install the @emotion/babel-preset-css-prop

[Andarist]

For the JSX namespace to be resolved automatically with the new automatic runtime you need to be on TS 4.1 which is supposed to be released this week. This is mentioned in that linked post:

For the automatic runtime this has been implemented by exporting JSX namespace from the appropriate entries but this is only supported in TypeScript 4.1 or higher.

There is also mentioned an intermediary solution of adding /// <reference types="@emotion/react/types/css-prop" /> to your project.

[clfhhc]

So I have to update the TS version to 4.1 to make use of the new JSX runtimes. Gotcha, thanks.

[clfhhc]

I have to reopen this issue because I still see it after upgrading the typescript to 4.1.2. The reproduction steps with my sample repo are still valid.

[Andarist]

Please just apply this patch:

diff --git a/tsconfig.json b/tsconfig.json
index c8399a6..983beb9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -21,7 +21,8 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@emotion/react",
     "baseUrl": "./src"
   },
   "include": [

This probably ain't mentioned anywhere in the docs - if you'd like to prepare one I would appreciate a PR for this.

[clfhhc]

Thanks. That works.
For NextJs build, it insists setting "jsx": "preserve":

> next build

We detected TypeScript in your project and reconfigured your tsconfig.json file for you.

The following mandatory changes were made to your tsconfig.json:

        - jsx was set to preserve (next.js implements its own optimized jsx transform)

[Andarist]

Oh - I haven't realized that next enforces this. From what I looked up in their code they don't really use TS for transpiling at all so I'm not sure why do they insist on this value 🤷‍♂️

I have also thought that "jsx": "react-jsx" is required for "jsxImportSource" but it seems that it isn't - the latter works without the former when it comes to the JSX namespace lookup.