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

[mearns]

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

[itsUndefined]

When you are using the jsxImportSource option, you don't have to declare a pragma and you don't have to import { jsx } from 'emotion/react' in order to use the css prop.

[mearns]

Thank you, but now the generated HTML string is not being processed by emotion.

I remove those two lines so that "src/homepage.tsx" is:

export default function Homepage() {
    return (<span css={{ color: "red" }}>anything</span>);
}

and generate the HTML output as:

import ReactDOMServer from "react-dom/server";
import Homepage from "./src/homepage";

export default async function generateSite() {
  console.log(ReactDOMServer.renderToString(<Homepage />));
}

the output is:

<span css="[object Object]" data-reactroot="">anything</span>

[mearns]

I'm not using any app template such as create-react-app; I am positive I'm running tsc to turn ".tsx" files into ".js" files, and then using NodeJS to execute the generate ".js" file. Also, I have typescript syntax in my files, so if I wasn't compiled with tsc, I would get syntax errors from Node.

Perhaps there is no bug in emotion; but I'm following the directions in the documentation and emotion isn't processing the css property like it's supposed to.

[itsUndefined]

Sorry that I misunderstood you. I understand that you are using node.js to do server side rendering and so you don't have babel/webpack. Just using tsc and running in node.js. Can you confirm you have removed the pragma comment from all files? Can you confirm you have removed the jsx import from all files? I just generated a new project with your tsconfig.json, the following dependencies:

and I wrote the following script

import { renderToString } from 'react-dom/server';

function Test() {
    return <div css={{ height: 1 }}></div>
}
console.log(renderToString(<Test />));

I get the following correct output:
<style data-emotion="css bz7pfh-Test">.css-bz7pfh-Test{height:1px;}</style><div class="css-bz7pfh-Test"></div>

Sorry that I could not help you but this minimal reproduction works fine and I have used tsc alone before without having to declare any pragma at the top.

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

[Andarist]

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