๐Ÿ”ฎ Sanity Create is here. Writing is reinvented. Try now, no developer setup

Freecodecamp - Next-Sanity Finding React 18 instead of React 17

17 replies
Last updated: Apr 9, 2022
Hello all! I'm working through a freecodecamp sanity + next tutorial (power user right here!) which is going well until I try to use next-sanity. Any help would be greatly appreciated ๐Ÿ™‚
I am getting an error (screengrab attached) which I believe relates to @portabletext/react looking for React 17 but finding only React 18 (installed by create-next-app)? Any ideas? Thanks.
Apr 8, 2022, 5:25 PM
it looks like the current package for react-portable-text does support react 18, you could try updating to that by running
npm install react-portable-text@latest
Apr 8, 2022, 5:59 PM
actually hold up I might be looking at wrong package sorry
Apr 8, 2022, 6:02 PM
seems this package does not support react-18 yet, but 17 is only listed as a peer dep. I would suggest possibly switching to react 17 if possible, there are not likely too many things you need in 18 at this point
Apr 8, 2022, 6:06 PM
To do that I go to the package.json in the next app folder and change the react and react dom versions to 17 and then npm install?
Apr 8, 2022, 6:11 PM
naively yes, and it might work but react 18 changes some system level stuff, and that might cause other bits to break, ideally you would use CRA to get a slightly older version.
Apr 8, 2022, 6:12 PM
you can try it and see if it works
Apr 8, 2022, 6:12 PM
another option is to ignore peer dependencies when installing @portabletext/react
Apr 8, 2022, 6:13 PM
as it might work just fine with react 18
Apr 8, 2022, 6:13 PM
Thanks I'll try your suggestions
Apr 8, 2022, 6:23 PM
No dice (assuming I reinstalled portable text correctly, which is a big assumption ๐Ÿ˜„)I think the issue is the tutorial may be out of date, all the functions the instructor used are causing Next js to throw errors. (or else initial intuition React 18 is the problem is correct?)
Back to the drawing board
Apr 8, 2022, 6:44 PM
that sucks - next js might have a good starting template for you to use
Apr 8, 2022, 7:29 PM
or these: https://www.sanity.io/exchange/type=starters/framework=nextjs - I built (am building) our company framework by starting from/copying a lot of the Next.js Landing Pages template there
Apr 8, 2022, 7:32 PM
I cloned a starter pack and with React 17.0.2 npm run dev worked fine. Updated React and React DOM to 18.0.0 and it's broken with the same error message I was getting in the other project.
Is there a way to create a next app but to flag it to use React 17.0.2 instead of the default 18? Been banging my head against the keyboard for a while now, be a shame to give up on the tutorial now
Apr 8, 2022, 9:04 PM
next should work just fine with react 17 - why did you upgrade it to 18 (like is there another tool that requires it)? you should be able to edit package.json back down to
for both
Apr 8, 2022, 10:48 PM
i don't imagine there is much in the tutorial that is v18 specific - but if you shoot me a link to it, I can double check that assertion
Apr 8, 2022, 10:49 PM
When I use npx create-next-app it automatically uses react 18. Sfa of real benefit to me with react 18.
Apr 9, 2022, 1:01 AM
Got it working, thanks for your help yesterday
Apr 9, 2022, 11:39 AM

Sanityโ€“ build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?