Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add peer dependency support for React 19 #5109

Merged
merged 4 commits into from
Oct 28, 2024
Merged

Add peer dependency support for React 19 #5109

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fbe290e
Add peer dependency support for React 19
davidkpiano Oct 27, 2024
b28b14a
Changeset
davidkpiano Oct 27, 2024
7742cb4
Update packages/xstate-react/package.json
davidkpiano Oct 28, 2024
ef57f54
Update packages/xstate-store/package.json
davidkpiano Oct 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/four-countries-serve.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@xstate/react': patch
'@xstate/store': patch
---

Add React 19 as a peer dependency
2 changes: 1 addition & 1 deletion packages/xstate-react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
"url": "https://github.com/statelyai/xstate/issues"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder - what motivated this change now? If I'm not mistaken there is no version out there that's compatible with what is added here, so in some sense - this is going to be a "noop" until React 19 actually gets released.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I’m not sure about the details of package fixes, but here’s what I have encountered as a XState user.

The recently released Next.js 15 supports React 19. However, when installing @xstate/react, I have encountered peer dependency errors. Judging from the logs, it seems @xstate/react does not support React 19. To suppress the error message, I needed to downgrade react and react-dom from 19 to 18.

https://nextjs.org/blog/next-15

npx create-next-app@latest next-xstate-15 \
                              --typescript \
                              --eslint \
                              --import-alias "@/*" \
                              --src-dir \
                              --use-pnpm \
                              --tailwind \
                              --app \
                              --use-pnpm \
                              --turbopack
cd next-xstate-15

Install xstate:

pnpm install xstate 
dependencies:
+ xstate 5.18.2

Done in 748ms

When installing @xstate/react, the error message indicates that @xstate/react does not support React 19:

pnpm install @xstate/react
dependencies:
+ @xstate/react 4.1.3

 WARN  Issues with peer dependencies found
.
└─┬ @xstate/react 4.1.3
  ├── ✕ unmet peer react@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.0-rc-69d4b800-20241021
  ├─┬ use-isomorphic-layout-effect 1.1.2
  │ └── ✕ unmet peer react@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.0-rc-69d4b800-20241021
  └─┬ use-sync-external-store 1.2.2
    └── ✕ unmet peer react@"^16.8.0 || ^17.0.0 || ^18.0.0": found 19.0.0-rc-69d4b800-20241021

Done in 744ms

Here is package.json:

{
  ...
  "dependencies": {
    "@xstate/react": "^4.1.3",
    "next": "15.0.1",
    "react": "19.0.0-rc-69d4b800-20241021",
    "react-dom": "19.0.0-rc-69d4b800-20241021",
    "xstate": "^5.18.2"
  },
  ...
}

Here is my repository:

https://github.com/hayato94087/next-xstate-15

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Andarist See here for the original discussion: https://discord.com/channels/795785288994652170/1299849094629560421/1299849094629560421

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The problem is that this doesn't solve this issue:

require('semver').satisfies('19.0.0-rc-69d4b800-20241021', '^19.0.0') // false

To make it work you have to relax this peer dep range even further to allow prereleases

davidkpiano marked this conversation as resolved.
Show resolved Hide resolved
"xstate": "workspace:^"
},
"peerDependenciesMeta": {
Expand Down
2 changes: 1 addition & 1 deletion packages/xstate-store/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@
"xstate": "workspace:^"
},
"peerDependencies": {
"react": "^18.2.0",
"react": "^18.2.0 || ^19.0.0",
davidkpiano marked this conversation as resolved.
Show resolved Hide resolved
"solid-js": "^1.7.6"
},
"peerDependenciesMeta": {
Expand Down