Typescript error trying to use @emotion/react: Cannot read property 'kind' of undefined

Current behavior:

I’m attempting to use emotion-js with a typescript JSX project using the @emotion/react package. I’ve tried following the directions here, but when I try to compile the code with tsc, I get an error saying “Cannot read property ‘kind’ of undefined” (shown below). The error doesn’t specify emotion at all, but as soon as I remove the import of “@emotion/react”, the error goes away and the code compiles fine.

Here is the error:

/Users/bmearns/sandbox/personal/npm-project-website/node_modules/typescript/lib/tsc.js:88055
                throw e;
                ^

TypeError: Cannot read property 'kind' of undefined
    at getRootDeclaration (/Users/bmearns/sandbox/personal/npm-project-website/node_modules/typescript/lib/tsc.js:12806:21)
    at Object.isCatchClauseVariableDeclarationOrBindingElement (/Users/bmearns/sandbox/personal/npm-project-website/node_modules/typescript/lib/tsc.js:10594:20)
    at getTypeOfVariableOrParameterOrPropertyWorker (/Users/bmearns/sandbox/personal/npm-project-website/node_modules/typescript/lib/tsc.js:42296:20)
    at getTypeOfVariableOrParameterOrProperty (/Users/bmearns/sandbox/personal/npm-project-website/node_modules/typescript/lib/tsc.js:42265:28)
    at getTypeOfSymbol (/Users/bmearns/sandbox/personal/npm-project-website/node_modules/typescript/lib/tsc.js:42579:24)
    at getTypeOfParameter (/Users/bmearns/sandbox/personal/npm-project-website/node_modules/typescript/lib/tsc.js:58801:24)
    at tryGetTypeAtPosition (/Users/bmearns/sandbox/personal/npm-project-website/node_modules/typescript/lib/tsc.js:58852:24)
    at getTypeAtPosition (/Users/bmearns/sandbox/personal/npm-project-website/node_modules/typescript/lib/tsc.js:58847:20)
    at getTypeOfFirstParameterOfSignatureWithFallback (/Users/bmearns/sandbox/personal/npm-project-website/node_modules/typescript/lib/tsc.js:58961:54)
    at getJsxPropsTypeFromCallSignature (/Users/bmearns/sandbox/personal/npm-project-website/node_modules/typescript/lib/tsc.js:55377:29)

To reproduce:

Using the following:

{
  "scripts": {
    "compile": "tsc",
  },
  "dependencies": {
      "@emotion/react": "11.1.5",
      "react": "17.0.1",
      "react-dom": "17.0.1"
  },
  "devDependencies": {
    "typescript": "4.2.3"
  }
}

With the following tsconfig.json:

{
  "compilerOptions": {
    "outDir": "dist/",
    "esModuleInterop": true,
    "module": "CommonJS",
    "sourceMap": true,
    "target": "es2015",
    "moduleResolution": "node",
    "declaration": true,
    "jsx": "react-jsx",
    "jsxImportSource": "@emotion/react"
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"]
}

And the following as “src/homepage.tsx”:

/** @jsx jsx */
import { jsx } from '@emotion/react'

export default function Homepage() {
    return (<span>anything</span>);
}

Now compile the code by running npm run compile

Expected behavior:

I expect the typescript compiler to correctly compile the code without any errors. Instead, I get a fatal error (shown above), and the code is not compiled.

Note that if I remove these two lines from “src/homepage.tsx”:

/** @jsx jsx */
import { jsx } from '@emotion/react'

and remove this line from tsconfig.json:

"jsxImportSource": "@emotion/react"

Now the code compiles fine, but of course, then I can’t use emotion.

Environment information:

• react version: 17.0.1
• react-dom version: 17.0.1
• @emotion/react version: 11.1.5
• typescript version: 4.2.3
• node version: 14.13.0

[Andarist]

@mearns note that this looks like a TS bug and might be worthwhile to report that to their team.

[mearns]

Thank you! Using your minimal example it worked fine. From that I was able to find the missing piece in my original: I needed the “@types/react-dom” dependency. Without that, the tsc compiler fails with the error cited above when I try to use @emotion/react As soon as I add that dependency, it compiles correctly and correctly processes the css property of react components.

Thanks for the help!