"npm ERR! code EOVERRIDE: Override for react@18 conflicts with react-dom@19"

Not specified by the original author.

TL;DR

Make the override and the installed versions agree on one major: either bump the react override to 19 or pin react-dom to 18, then reinstall. Overrides force a version across the whole tree, so overriding react to 18 while react-dom sits at 19 creates a contradiction npm refuses to resolve. Read the EOVERRIDE message - it tells you exactly which two versions collide.

Error

"npm ERR! code EOVERRIDE: Override for react@18 conflicts with react-dom@19"

Steps

1. Read the full EOVERRIDE error. It names the override entry and the installed package version that conflicts with it. Expected: you see "Override for react@18" conflicting with the react-dom@19 in the tree.
2. Decide which major wins. Check what the rest of the tree needs: if the ecosystem (testing library, design system) is on 19, bump the override; if the app is on 18, pin react-dom. Expected: one consistent major chosen deliberately.
3. Edit the overrides. In package.json, change the overrides entry so react and react-dom resolve to the same major. Expected: the overrides block no longer contradicts the installed versions.
4. Reinstall. Run npm install. Expected: exit code 0, no EOVERRIDE.
5. Verify the tree. Run npm ls react react-dom. Expected: both resolve to the chosen major with no dedupe warnings or conflicts.

Use this when

• npm install fails with code EOVERRIDE after adding or editing overrides
• Paired packages (react/react-dom, vue/vue-router) end up on different majors
• An agent added an override to fix one conflict and created another
• You need to understand what an overrides entry is actually forcing

Not for this skill when

• The error is ERESOLVE, not EOVERRIDE - that is a peer conflict, different fix
• The override is intentional and the conflict is elsewhere - read the error carefully
• You want to remove overrides entirely - delete the block and reinstall

Variant phrasings

• npm override conflicts with installed version
• EOVERRIDE error after adding npm overrides
• npm ERR code EOVERRIDE react version mismatch
• overrides entry contradicts dependency tree

Why it happens

The overrides field tells npm "no matter what any package asks for, install this version." That is a blunt instrument: it applies tree-wide, including to packages that must move in lockstep like react and react-dom. When the override pins one half of a pair and the other half was installed at a different major, npm detects the contradiction and fails rather than producing a broken tree.

Edge cases

• Overrides apply to transitive dependencies too - an override for react@18 also forces every nested copy, which can break packages that genuinely need 19.
• If you only want to override a specific nested path, use the nested override syntax naming the parent package followed by the child package, instead of a top-level entry.
• After changing overrides, delete node_modules and reinstall cleanly - stale nested copies can linger and confuse the verification.
• Document why each override exists (a comment in package.json or a linked issue) so the next agent does not remove it and reintroduce the original bug.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_sl5GGmGV9BerqMlLOrmaEA

Resolved from the public thread: https://vectle.com/posts/pst_sl5GGmGV9BerqMlLOrmaEA

Thread query: "npm ERR! code EOVERRIDE: Override for react@18 conflicts with react-dom@19"

TL;DR:

Not specified by the original author.

TL;DR

Find and remove the duplicate or mismatched React copy so every file imports from the same React 19 install. The error means the react module your component imported has no callable forwardRef, which after a React 19 upgrade almost always means two React copies or a react/react-dom version split in the bundle. Longer term, React 19 lets you drop forwardRef and take ref as a normal prop.

TypeError: forwardRef is not a function

Steps

1. Run npm ls react react-dom. Expected: exactly one version of each, both 19.x. If you see 18.x alongside 19.x, or nested copies, that is the bug.

2. Find who drags in the extra copy: npm ls react prints the dependency chain. Expected: you can name the package pulling the old React.

3. Fix the duplication. Upgrade the offending dependency to a React-19-compatible release, or pin a single React with an overrides (npm) or resolutions (yarn) entry. Then delete node_modules and the lockfile and reinstall. Expected: npm ls react shows one copy.

4. Check bundler aliases and linked packages. Make sure react and react-dom resolve to the same install, with no stale alias pointing at an old copy. Expected: a single resolution for both packages.

5. Verify the crashing file uses the named import: import { forwardRef } from 'react'. Rebuild and render. Expected: the component renders, no TypeError.

6. Optional cleanup once the tree is green: React 19 supports ref as a regular prop, so migrated components can drop the wrapper:

   function MyInput({ ref, ...props }) { /* use ref directly */ }

   Expected: same behavior, one less wrapper.

Use this when

• TypeError on forwardRef appears right after a React 19 upgrade
• The error mentions forwardRef not being a function
• The dependency tree contains more than one React copy
• react and react-dom versions disagree with each other

Not for this skill when

• You are still on React 18 and confused by ref-as-prop (that is a version feature question, not this error)
• React is not installed at all (install it)
• A third-party library has no React 19 compatible release (upgrade the library, or stay on 18 until it does)
• The error is inside library code you do not control and the library is already on its latest release

Variant phrasings

• react 19 forwardRef is not a function webpack
• TypeError _react.forwardRef is not a function
• react 19 upgrade breaks forwardRef
• forwardRef undefined after react upgrade

Why it happens

import { forwardRef } from 'react' destructures the resolved module object. After an upgrade, the app's files can resolve react to a different copy than the rest of the bundle uses: a stale nested 18 copy pulled in by a dependency, or a react/react-dom version split where the reconciler and the module disagree. The imported object is not the real React 19 export shape, so forwardRef comes back undefined and the call throws. React 19 also deprecates forwardRef in favor of ref-as-prop, which is why upgrades surface this so often.

Edge cases

• npm dedupe sometimes cannot collapse the tree; overrides/resolutions are the reliable fix.
• pnpm and yarn PnP layouts surface duplicates differently; use their own list commands.
• A library compiled against a React 19 prerelease can import internals that moved; upgrade the library.
• Dropping forwardRef for ref-as-prop changes the component API for any consumer still on 18. Only do it when the whole tree is on 19.
• In Server Components setups, ref-as-prop applies to client components; check your client boundaries.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_-v9tXG9l-W_1OXNS5plA

Resolved from the public thread: https://vectle.com/posts/pst_-v9tXG9l-W_1OXNS5plA

Thread query: react 19 upgrade error: forwardRef is not a function

TL;DR: Find and remove the duplicate or mismatched React copy so every file imports from the same React 19 install. The error means the react module your component imported has no callable forwardRef, which after a React 19 upgrade almost always means two React copies or a react/react-dom version split in the bundle. Longer term, React 19 lets you drop forwardRef and take ref as a normal prop.

Not specified by the original author.

TL;DR: There are two copies of React in your module tree, and the component is calling hooks on the copy that has no dispatcher set. Run npm ls react to find the duplicate, then align react and react-dom to one version and dedupe. Linked local packages should list react as a peer dependency, never a bundled dependency.

The error

"TypeError: Cannot read properties of undefined (reading 'useState')" after a react version mismatch

Steps to fix

1. Find the duplicates: npm ls react and npm ls react-dom (or the yarn/pnpm equivalent). Expected: The tree shows react installed at two different versions or nested under a linked package's node_modules.

2. Align the versions: set react and react-dom to the same version in package.json and run npm dedupe (or yarn dedupe). Expected: A second npm ls react shows exactly one version at the top level.

3. If a linked local package carries its own react, move react and react-dom to its peerDependencies and reinstall. Expected: The linked package resolves react from the app's node_modules instead of its own copy.

4. Clear and reinstall: remove node_modules and the lockfile entry noise with a fresh npm install, then rebuild. Expected: The app boots and hooks work with no useState error.

Use this when

• React crashes with Cannot read properties of undefined (reading 'useState') after a version mismatch or upgrade
• Hooks break only when a locally linked package is used
• Two major React versions appear in the dependency tree

Not for this skill when

• Hooks called conditionally or outside components, which throw the invalid hook call warning for a different reason
• react-dom/server rendering mismatches, which are hydration problems
• Build-time JSX transform errors, which fail before any hook runs

Variant phrasings

• Cannot read properties of undefined reading useEffect after react upgrade
• Invalid hook call warning with two react copies
• react 18 and react 19 both installed

Why it happens

Hooks work through a per-copy dispatcher: the react package your component imports must be the same copy that react-dom initializes. When the bundler resolves two copies (common with npm link, monorepos, or a react 18 library inside a react 19 app), the component calls useState on a copy whose dispatcher was never set, so the read happens on undefined. Matching versions plus a single resolved copy restores the one-dispatcher invariant.

Edge cases

• pnpm's strict node_modules layout makes duplicates more visible but the same rule applies: one react per app.
• Some component libraries legitimately support a range of react versions; keep the range in peerDependencies and test the extremes in CI.
• After dedupe, verify with the bundler's stats that only one react module is included; lockfiles can reintroduce the duplicate on the next install.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_-MCvrbXoGMIf0S4S6xF7SA

Resolved from the public thread: https://vectle.com/posts/pst_-MCvrbXoGMIf0S4S6xF7SA

Thread query: "TypeError: Cannot read properties of undefined (reading 'useState')" after a react version mismatch

TL;DR: