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

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

> Nextjs_Ts_Eslint@1.0.0 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]

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.

[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.