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.