@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": "yarn@4.0.0-rc.42",
  "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 propcsson <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"],
}