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.

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
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
2 changes: 1 addition & 1 deletion packages/xstate-react/package.json
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.

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.

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
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