React 19 Types Support

[karlhorky]

The problem

Using React 19 with the version of TypeScript types mentioned in the upgrade guide (using pnpm overrides to avoid mismatching types) causes failures with the Emotion types:

@jsxImportSource of @emotion/react

/** @jsxImportSource @emotion/react */

export default function ChevronList() {
  return (
    // 💥 Property 'ul' does not exist on type 'JSX.IntrinsicElements'. ts(2339)
    <ul />
  );
}

@emotion/styled

import styled from '@emotion/styled';

const ArrowListItem =
  // 💥 Property 'li' does not exist on type 'CreateStyled'. ts(2339)
  styled.li``

Relevant parts of my package.json:

{
  "dependencies": {
    "@emotion/react": "11.11.4",
    "@emotion/styled": "11.11.5",
    "next": "14.3.0-canary.63",
    "react": "19.0.0-beta-4508873393-20240430",
    "react-dom": "19.0.0-beta-4508873393-20240430"
  },
  "devDependencies": {
    "@types/react": "npm:[email protected]",
    "@types/react-dom": "npm:[email protected]"
  },
  "packageManager": "[email protected]",
  "pnpm": {
    "overrides": {
      "@types/react": "npm:types-react@beta",
      "@types/react-dom": "npm:types-react-dom@beta"
    }
  }
}

Proposed solution

@emotion/react and @emotion/styled should be updated to support React 19

Alternative solutions

No viable alternatives I can think of, apart from not supporting React 19+

Additional context

--

[karlhorky]

Workaround

Use pnpm patch (or patch-package) to patch @emotion/react and @emotion/styled using the React 19 codemod:

pnpm patch --edit-dir ./node_modules/.pnpm-patch-emotion-react @emotion/react
cd ./node_modules/.pnpm-patch-emotion-react
npx types-react-codemod@latest preset-19 .
cd ../..
pnpm patch-commit ./node_modules/.pnpm-patch-emotion-react
rm -r ./node_modules/.pnpm-patch-emotion-react

pnpm patch --edit-dir ./node_modules/.pnpm-patch-emotion-styled @emotion/styled
cd ./node_modules/.pnpm-patch-emotion-styled
npx types-react-codemod@latest preset-19 .
cd ../..
pnpm patch-commit ./node_modules/.pnpm-patch-emotion-styled
rm -r ./node_modules/.pnpm-patch-emotion-styled

[Andarist]

We'll get to work on this once React 19 gets published.

[andreibicu]

We'll get to work on this once React 19 gets published.

It got released in April. Check the official upgrade guide. The team is stuck with react 18 because of the @emotion packages. I hope your team starts working on this asap.

[Andarist]

It got released in April.

It didn't. It's an RC version, not a stable one.

I hope your team starts working on this asap.

I hope your team sponsors that work instead of relying on free labor in a demanding way.

[andreibicu]

I hope your team sponsors that work instead of relying on free labor in a demanding way.

Actually, we don't use the @emotion packages directly. It's the default styling engine recommended by the MUI team when we migrated to version 5. I didn't want to sound "demanding", I think I'm realistic that such an upgrade can be easily done in a week (by a person with many and long breaks). I thought the RC is good enough, but anyway looking forward for this change. All the best.

[crutchcorn]

@andreibicu then do it yourself.

[guhur]

Thanks for your lib!

We are using it through Chakra-UI in our NextJS application.

NextJS 15 App Router is using React 19 RC:

We will not be able to upgrade while emotion-js does not support React 19. Do you think you could share a rough estimate for when you are going to support React 19?

Thanks!

[Andarist]

The rough estimate is "in the future". It's not even obvious if we are going to be able to support React 19 types in Emotion 11. We'll definitely be working on Emotion 12 though and that will be compatible with React 19.

[stevenpollack]

Workaround

Use pnpm patch (or patch-package) to patch @emotion/react and @emotion/styled using the React 19 codemod:

pnpm patch --edit-dir ./node_modules/.pnpm-patch-emotion-react @emotion/react
cd ./node_modules/.pnpm-patch-emotion-react
npx types-react-codemod@latest preset-19 .
cd ../..
pnpm patch-commit ./node_modules/.pnpm-patch-emotion-react
rm -r ./node_modules/.pnpm-patch-emotion-react

pnpm patch --edit-dir ./node_modules/.pnpm-patch-emotion-styled @emotion/styled
cd ./node_modules/.pnpm-patch-emotion-styled
npx types-react-codemod@latest preset-19 .
cd ../..
pnpm patch-commit ./node_modules/.pnpm-patch-emotion-styled
rm -r ./node_modules/.pnpm-patch-emotion-styled

Sadly, this didn't work for me.

Just wanted to come around and +1 this issue. Given next 15 says that react 19 is a requirement (even though it's still in RC), using

   "jsx": "preserve",
   "jsxImportSource": "@emotion/react",

in my tsconfig.json makes migrating to next 15 while still using emotion pret-ty hard...

[Toumash]

We'll get to work on this once React 19 gets published.

React 19 was just released today. Yay 🎉 https://react.dev/blog/2024/12/05/react-19

[emmatown]

This was fixed in #3206. Creating a new project using Next 15 and React 19 for example, works completely fine. The future work mentioned in https://github.com/emotion-js/emotion/issues/3186#issuecomment-2439912560 will likely make Emotion require less setup but it already currently works and relevant to this particular issue, the types work so I'm closing this.