dose zustand support latest vesion React 19？

[BertramYe]

hello when I use the latest React19 of the Next 15 RC , I find the error here below , but it's OK in the React 18:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@"19.0.0-rc-f994737d14-20240522" from [email protected] 
npm ERR!   node_modules/next
npm ERR!     peer next@"^14.0.0-0 || ^15.0.0-0" from [email protected]
npm ERR!     node_modules/next-auth
npm ERR!       next-auth@"^5.0.0-beta.20" from the root project
npm ERR!     next@"15.0.0-rc.0" from the root project
npm ERR!   peer react@"^18.2.0 || ^19.0.0-0" from [email protected]   
npm ERR!   node_modules/next-auth
npm ERR!     next-auth@"^5.0.0-beta.20" from the root project
npm ERR!   3 more (react-dom, styled-jsx, the root project)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional react@">=16.8" from [email protected]
npm ERR! node_modules/zustand
npm ERR!   zustand@"4.5.5" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react
npm ERR!   peerOptional react@">=16.8" from [email protected]
npm ERR!   node_modules/zustand
npm ERR!     zustand@"4.5.5" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! C:\Users\Administrator\AppData\Local\npm-cache\_logs\2024-08-17T10_56_00_869Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: C:\Users\Administrator\AppData\Local\npm-cache\_logs\2024-08-17T10_56_00_869Z-debug-0.log

[dai-shi]

We won't get such errors once React 19 is out.
Until then, you need --force.

[BertramYe]

also in the nextjs, it did cause the error like this with the same codes(https://stackblitz.com/edit/stackblitz-starters-idveqs?file=next.config.js):

[dai-shi]

And, here's the fix: https://stackblitz.com/edit/vitejs-vite-vbtlq7?file=vite.config.ts,src%2FApp.tsx%3AL49

[BertramYe]

yeah, it works now, it seem just because the hooks name ? it must start with the ^use ? I found when I change the hooks name from 'blogStore ' into 'useBlogStore', the error fixed in the NextJS 15rc as well

[dai-shi]

Yeah, React Compiler would only recognize hooks with the name. I think you can reproduce the same error without Zustand.

[BertramYe]

ok, Great, I will try later , but anyway, thank you very much ❤,and maybe if possible, you can note this point in your offical doc to avoid the same error occurred in the future when use the zustand, I think 😀.

[dbritto-dev]

@BertramYe that's not related to Zustand but React itself, so you should try not to break React rules

[dai-shi]

Agree with @dbritto-dev.
Besides, we never teach to remove use prefix from hook name. (Let me know why you named like blogStore. Then, we might be able to improve our docs. "use" prefix is important for eslint rules to work.)
I think React Compiler (and React) could improve the error message. After all, it's still experimental.

[BertramYe]

sure, as when I use the hooks（including the zustand） in the React 18 without starts with the use, no error occured or warning alert, who knows ┑(￣Д ￣)┍.......

[mhaddi12]

I am creating react app using vite which goes

npm create vite projectName

i am using zustand when make variable of zustand My UI Goes Blank why?

[BertramYe]

hello @mhaddi12 , in my opptions, you'd better show out your codes , so that we can do you a favor...