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

React 19 compatibility issue? #130

Open
Nickk4 opened this issue Jan 16, 2025 · 2 comments
Open

React 19 compatibility issue? #130

Nickk4 opened this issue Jan 16, 2025 · 2 comments

Comments

@Nickk4
Copy link

Nickk4 commented Jan 16, 2025

The library was working perfectly but after upgrading from React 18 to 19, I get the error:

Error: A React Element from an older version of React was rendered. This is not supported. It can happen if:
•	Multiple copies of the "react" package is used.
•	A library pre-bundled an old copy of "react" or "react/jsx-runtime".
•	A compiler tries to "inline" JSX instead of using the runtime. at throwOnInvalidObjectType (react-dom-client.development.js:4442:15) at reconcileChildFibersImpl (react-dom-client.development.js:5376:11) at react-dom-client.development.js:5415:33 at reconcileChildren (react-dom-client.development.js:7738:13) at updateClassComponent (react-dom-client.development.js:8603:13) at beginWork (react-dom-client.development.js:9697:13) at runWithFiberInDEV (react-dom-client.development.js:543:16) at performUnitOfWork (react-dom-client.development.js:15044:22) at workLoopSync (react-dom-client.development.js:14870:41) at renderRootSync (react-dom-client.development.js:14850:11)

The above error occurred in the <Ao> component.

React will try to recreate this component tree from scratch using the error boundary you provided, RenderErrorBoundary. Error Component Stack at Ao (customScroll.tsx:141:5) at Scroll (index.tsx:15:19) at IndexPage (index.tsx:13:1)
@rommguy
Copy link
Owner

rommguy commented Jan 16, 2025

Thanks, I actually upgraded it already to React 18 and checked it there - are you sure this error appears on both 18 and 19
I can try to upgrade to 19 as well, it will take me a few weeks though.
You're welcome to create a PR for that

@Nickk4
Copy link
Author

Nickk4 commented Jan 16, 2025

I'm a bit new to this, but I think (part of) the problem is that the build of react-custom-scroll includes ReactDebugCurrentFrame, which React 19 doesn't like. If I build your library using React 19, these references are not there.

P.S. The error is only there on React 19. It worked all fine for me on React 18.

I think it might be solved if you replace in package.json:

"dependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
}

with:

"peerDependencies": {
  "react": ">=18.0.0",
  "react-dom": ">=18.0.0"
},
"devDependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants