Closed hdodov closed 1 month ago
barvian
commented
1 month ago Hi, thanks for filing. I haven't repro'd yet but I'd imagine this is because React 19 handles custom elements differently (and better). I'll probably have to push a separate React 19 version š¤
hdodov
commented
1 month ago Yep, looks like it. It works perfectly in a fresh Next.js project with the following deps:
{
"@number-flow/react": "^0.2.0",
"next": "14.2.15",
"react": "^18",
"react-dom": "^18"
}However, I get the same error when I force-install these ones:
{
"@number-flow/react": "^0.2.0",
"next": "15.0.0-canary.191",
"react": "19.0.0-rc-cd22717c-20241013",
"react-dom": "19.0.0-rc-cd22717c-20241013"
}It's just that in my main project I'm using pnpm, instead of npm, and it didn't throw an error... With npm, I get:
npm error Could not resolve dependency:
npm error peer react@"^18.3.1" from @number-flow/react@0.2.0
npm error node_modules/@number-flow/react
npm error @number-flow/react@"^0.2.0" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.So I guess it's a breaking change in React 19, yeah.
Anyways, the component is awesome! I like that you've made it minimal and have stuck with browser APIs, instead of building your own stuff. Respect for that mentality!
barvian
commented
1 month ago Thanks for checking!
AliMejbar
commented
1 month ago Hi there, I am getting kind of the same error : TypeError : Cannot read properties of undefined (reading 'map') with Nextjs 15 and React 19. The same code did work fine with MotionNumber v0.1.7.
I am using
{
"next": "15.0.0-rc.0",
"react": "19.0.0-rc-e56f4ae3-20240830",
"react-dom": "19.0.0-rc-e56f4ae3-20240830",
"@number-flow/react": "^0.2.0",
}
codehz
commented
1 month ago I think the reason may related to this
https://github.com/barvian/number-flow/blob/3e37877636d1f65f08f97c0b4afee3a917d64a87/packages/react/src/index.tsx#L128-L136
react 19 changed behavior for custom elements...
and if I patch parts={JSON.stringify(parts)} to parts={parts} the thing will work fine
AliMejbar
commented
1 month ago Workaround
I think the reason may related to this
react 19 changed behavior for custom elements... and if I patch
parts={JSON.stringify(parts)}toparts={parts}the thing will work fine
Great! Could you or @barvian take on the fix PR? If not, Iām happy to handle it.
codehz
commented
1 month ago Unfortunately it will break react 18 compatibility, maybe we need add some code to check react version..
AliMejbar
commented
1 month ago Unfortunately it will break react 18 compatibility, maybe we need add some code to check react version..
Yeah, good point. We could add a check for the React version to keep 18 compatibility. Or maybe a @beta or @next branch for React 19 since it's catching on more. Totally up to @barvian though.
barvian
commented
1 month ago I'm thinking there should be a separate React 19 version with a @next tag until React 19 is released, then the current React 18 package could become @number-flow/react-legacy or something. React 19 has far better support for custom elements which I'd like to leverage to trim down the bundle size š¤
barvian
commented
1 month ago I just pushed @number-flow/react@0.2.1 which adds basic support for React 19. I think I might wait to fully rewrite the component until React 19 is released š . Please let me know if you find any more issues!
I tried testing out the component in a Next.js site, but I get an error.
Next.js page.tsx:
test.tsx (from the official example):
When the page loads, the component correctly renders and I can see
5,000. But when I click on the button to change the number, I get this:React error:
Versions:
@number-flow/react^0.2.0next15.0.0-canary.191react19.0.0-rc-6cf85185-20241014react-dom19.0.0-rc-6cf85185-20241014