How to fix useId is not available in this React build in React

Run npm ls react react-dom (or pnpm ls/yarn why) to see which versions are currently resolved. If either dependency shows a version below 18.0.0, upgrade both packages together:

npm install react@18 react-dom@18

or lock to a specific patch:

npm install [email protected] [email protected]

After installing, clear module caches (rm -rf node_modules package-lock.json pnpm-lock.yaml) and reinstall to ensure the new versions are the only ones on disk.

Monorepo setups or transitive dependencies often install multiple React versions. Use dedupe commands (e.g., npm dedupe, pnpm dedupe, yarn install --check-files) and re-run npm ls react until only the React 18 copy remains. If you are using Yarn or pnpm workspaces, add a resolutions (Yarn) or packageExtensions (pnpm) entry so every package resolves to the same React version.

// package.json (Yarn)
"resolutions": {
  "react": "18.2.0",
  "react-dom": "18.2.0"
}

Then rerun your installer and rebuild.

Ask Node which file is being loaded in the build:

node -p "require.resolve('react')"
node -p "require.resolve('react-dom')"

They should point into node_modules/react and not into any vendor/CDN shim. If you see absolute paths pointing to a legacy folder, adjust your bundler’s resolve.alias so react and react-dom both resolve to your root node_modules. Vite typically resolves correctly, but Webpack projects may have leftover aliases from older migrations that still point to older builds.

After touching dependencies or resolution overrides, remove build artifacts so the next compile can pull fresh modules:

rm -rf node_modules package-lock.json pnpm-lock.yaml
npm install
rm -rf dist .next build
npm run build

Also clear any service worker or CDN caches that might still serve the old bundle, and hard-refresh the browser (Ctrl+Shift+R / Cmd+Shift+R) when testing.

Search your HTML template for <script ... react tags. Remove any statements that load React 17 from a CDN, because they override your bundled React 18 with an older runtime. If you absolutely need a CDN build, make sure it is React 18:

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

Using npm-managed packages is still preferred, but if you reference CDN scripts, always point them to a matching React 18 build.

Frameworks that ship their own React version also need to be on a React 18 release. For Create React App, install react-scripts 5.0.0 or later:

npm install react-scripts@5

In Next.js, run npm install next@latest (Next 12.1+ automatically ships React 18) and use the App Router or Client Components for parts that call hooks like useId. Make sure any custom entry points use ReactDOM.createRoot instead of the legacy render so the client bundle uses the modern renderer.