@emotion/react in conjunction with @chakra-ui/react causes type error

[bryanjswift]

Current behavior:

Simple components are producing TS2590: Expression produces a union type that is too complex to represent when using @chakra-ui/system to 2.5.5 and typescript to 5.0.3. Below is a minimal case.

This appears to be an interop problem with type modifications in @chakra-ui/react or @chakra-ui/system and @emotion/react. The type error is eliminated if the the "jsxImportSource": "@emotion/react" is dropped from tsconfig.json though that has other consequences. I have opened a related issue in @chakra-ui, see https://github.com/chakra-ui/chakra-ui/issues/7526

// index.tsx
import { Container } from '@chakra-ui/react';

const t = () => <Container />;

Still produces an error for me with this configuration.

// package.json
{
  "name": "chakra-7526-reproduction",
  "packageManager": "[email protected]",
  "dependencies": {
    "@chakra-ui/icons": "^2.0.18",
    "@chakra-ui/react": "^2.5.5",
    "@chakra-ui/system": "^2.5.5",
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "framer-motion": "^10.10.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@tsconfig/node18": "^1.0.1",
    "@types/react": "^18.0.31",
    "@types/react-dom": "^18.0.11",
    "typescript": "^5.0.3"
  }
}

// tsconfig.json
{
  "extends": "@tsconfig/node18/tsconfig.json",
  "compilerOptions": {
    "composite": true,
    "declarationMap": true,
    "incremental": true,
    "lib": [
      "dom",
      "es2021"
    ],
    "jsx": "react-jsx",
    "jsxImportSource": "@emotion/react",
    "target": "es2018",
    "outDir": "dist/",
    "declaration": true,
    "emitDeclarationOnly": true,
    "isolatedModules": true
  },
  "include": [
    "src/**/*",
    "test/**/*"
  ],
  "exclude": [
    "node_modules"
  ],
  "references": [
  ]
}

To reproduce:

1. Clone gist at https://gist.github.com/bryanjswift/3caee09992569aa385a15290842c3e92
2. Execute yarn tsc
3. See the compilation errors

Expected behavior:

Types should not conflict as a result of jsxImportSource

Environment information:

• react version: 18.2.0
• @emotion/react version: 11.10.6

[gencer]

Same issue arises with headlessui/react. See: https://github.com/tailwindlabs/headlessui/issues/2468

[nagayama]

In my case, I removed "jsxImportSource": "@emotion/react" from tsconfig.json and put "types": ["@emotion/react/types/css-prop"] instead, and it built without error.

[younes0]

@nagayama your solutions works !

Note for Next, you need to change next.config.js in order to avoid error Warning: Invalid value for prop css on <div> tag.

/** @type {import('next').NextConfig} */
const nextConfig = {
  compiler: {
    emotion: true,
  }
}

Source: https://nextjs.org/docs/architecture/nextjs-compiler#emotion

[KoTTi97]

In my case, I removed "jsxImportSource": "@emotion/react" from tsconfig.json and put "types": ["@emotion/react/types/css-prop"] instead, and it built without error.

Also tried @nagayama's solution, however i still get

Property css  does not exist on type
DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement

// tsconfig.json
{
	"compilerOptions": {
		"target": "es2017",
		"lib": ["dom", "dom.iterable", "esnext"],
		"allowJs": true,
		"skipLibCheck": true,
		"strict": true,
		"forceConsistentCasingInFileNames": true,
		"noEmit": true,
		"esModuleInterop": true,
		"moduleResolution": "node",
		"typeRoots": ["./node_modules/@types", "./types"],
		"resolveJsonModule": true,
		"isolatedModules": true,
		"jsx": "preserve",
		"jsxImportSource": "@emotion/react",
		"incremental": true,
		"checkJs": true,
		"noUncheckedIndexedAccess": true,
		"allowSyntheticDefaultImports": true,
		"alwaysStrict": true,
		"experimentalDecorators": true,
		"emitDecoratorMetadata": true,
		"noImplicitAny": true,
		"noImplicitThis": true,
		"noImplicitReturns": true,
		"noFallthroughCasesInSwitch": true,
		"pretty": true,
		"removeComments": true,
		"downlevelIteration": true,
		"strictNullChecks": true,
		"strictFunctionTypes": true,
		"strictPropertyInitialization": false,
		"outDir": "dist",
		"declaration": false,
		"sourceMap": true,
		"module": "esnext",
		"importHelpers": true,
		"baseUrl": ".",
		"plugins": [
			{
				"name": "next"
			}
		],
		"paths": {
			"@/*": ["./src/*"]
		}
	},
	"include": [
		".eslintrc.cjs",
		"next-env.d.ts",
		".next/types/**/*.ts",
		"**/*.ts",
		"**/*.tsx",
		"**/*.cjs",
		"**/*.mjs"
	],
	"exclude": ["node_modules"],
}