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

This is a common peer dependency issue that often pops up when working with Sanity and Next.js, especially when following older tutorials. The good news is it's usually just a warning that won't break your app!

Based on what I found in the Sanity GitHub issues, this happens when there are conflicting peer dependency requirements between different Sanity packages (like @portabletext/react, next-sanity, and @sanity/icons) and the version of React installed by create-next-app.

Here are your options to fix this:

1. Use --legacy-peer-deps (quickest solution)

When you install packages, add this flag:

npm install --legacy-peer-deps

This tells npm to ignore peer dependency conflicts. Despite the warning, the packages will work fine together - React 18 is generally backward compatible with libraries expecting React 17.

2. Update to the latest package versions

If the tutorial is using older versions, try updating to the latest:

npm install next-sanity@latest @portabletext/react@latest sanity@latest --legacy-peer-deps

The latest versions of these packages have been updated to properly support React 18 (and even React 19).

3. Configure npm to always use legacy peer deps

If you want to avoid typing the flag every time:

npm config set legacy-peer-deps true

4. Use --force (less recommended)

npm install --force

This is more aggressive than --legacy-peer-deps but will also bypass the check.

Why this happens:

Many FreeCodeCamp and other tutorials were created when React 17 was current. Package maintainers took time to update their peerDependencies declarations to include React 18, even though the actual code worked fine across versions. npm's strict peer dependency checking (introduced in npm 7+) flags these as potential issues, but they're usually safe to ignore.

According to the GitHub issue thread, even Sanity team members encountered this during npx sanity init - it's a known quirk of the ecosystem transitioning to React 18.

Moving forward:

Your app should run fine even with these warnings. The peer dependency system is being overly cautious. As long as your development server starts and your app renders correctly, you're good to go! The @portabletext/react library works perfectly fine with React 18 despite what the peer dependency declaration might say.

If you continue having runtime errors (not just install warnings), that would be a different issue - but the peer dependency warnings themselves won't prevent your code from working.