Open karlhorky opened 2 months ago
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
We'll get to work on this once React 19 gets published.
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.
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.
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.
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
@emotion/styled
Relevant parts of my
package.json
:Proposed solution
@emotion/react
and@emotion/styled
should be updated to support React 19Alternative solutions
No viable alternatives I can think of, apart from not supporting React 19+
Additional context
--