@types/[email protected] + jsxImportSource: @emotion/react = Its return type 'ReactNode' is not a valid JSX element.

[karlhorky]

Current behavior:

Over the last months, there have been significant changes to the TypeScript @types/react package by @eps1lon in order to accommodate the different return types of components (one of the reasons being to avoid the problems with async React components)

Using "jsxImportSource": "@emotion/react" along with the new @types/[email protected] package causes failures that look like this:

'Title' cannot be used as a JSX component.
  Its return type 'ReactNode' is not a valid JSX element.
    Type 'undefined' is not assignable to type 'Element | null'.

CodeSandbox: https://codesandbox.io/p/sandbox/emotion-issue-template-forked-vsng2b?file=%2Fsrc%2FApp.tsx

To reproduce:

1. Fork the sandbox reproduction: https://codesandbox.io/s/emotion-issue-template-y306ue
2. Upgrade all versions of all dependencies and devDependencies
3. TypeScript error appears

Expected behavior:

"jsxImportSource": "@emotion/react" and the @types/[email protected] package are compatible

Environment information:

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

[karlhorky]

Opened a PR with a potential fix here:

• Fix compat with @types/[email protected] #3050

cc @Andarist happy to do any further changes to this as well, let's discuss in the PR if necessary

[naari3]

As a temporary workaround until #3048 is merged, I think adding this type definition will work fine.

import { JSX } from '@emotion/react/jsx-runtime';

declare module '@emotion/react/jsx-runtime' {
  namespace JSX {
    type ElementType = React.JSX.ElementType;
  }
}

[akd-io]

It took me some time to find this issue. I think this is what's causing TypeScript errors in Next.js + Emotion projects created with my tool at create-next-stack.com.

When setting

compilerOptions: {
  ...
  "jsxImportSource": "@emotion/react"
}

in tsconfig.json

I get

./pages/_app.tsx:4:11
Type error: 'Component' cannot be used as a JSX component.
  Its element type 'string | number | boolean | Component<any, any, any> | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | PromiseLikeOfReactNode | null | undefined' is not a valid JSX element.
    Type 'undefined' is not assignable to type 'Element | ElementClass | null'.

_app.tsx simply looks like this:

import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

Dependencies:

@emotion/react 11.11.0     @types/react 18.2.8        eslint-config-next 13.4.4  react 18.2.0
@emotion/styled 11.11.0    @types/react-dom 18.2.4    next 13.4.4                react-dom 18.2.0
@types/node 20.2.5         eslint 8.42.0              next-plausible 3.7.2       typescript 5.1.3

Thank you guys for looking into this!

[rick-chou]

Failed to compile /examples/material-next-ts mui/material-ui#37500

@naari3 I use this workaround, but I got another error

JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.

[naari3]

@rick-chou Normally if you have @types/react, JSX.IntrinsicElements should be present, so perhaps you have a different problem than this issue is dealing with maybe?
Above all, I don't know what kind of environment you are in, so we can't be sure exactly what is going on.

[rick-chou]

@rick-chou Normally if you have @types/react, JSX.IntrinsicElements should be present, so perhaps you have a different problem than this issue is dealing with maybe? Above all, I don't know what kind of environment you are in, so we can't be sure exactly what is going on.

thanks! I updated all the dependencies and used this workaround, and solved the problem.

[karlhorky]

Thanks for the PR #3048 , review and merge @naari3, @Andarist, @emmatown ! 🙌

Looking forward to trying this out in @emotion/[email protected] after #3051 gets merged!

[akd-io]

Works like a charm! 🎉