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.

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.