How to fix forwardRef is not a function in React

ReactINTERMEDIATEHIGHUpdated Dec 9, 2025· 106 views

This error occurs when React.forwardRef cannot be imported or called properly, typically due to incorrect React imports, version mismatches between react and react-dom, or using incompatible library versions that don't support forwardRef.

Quick fix

Fixes forwardRef is not a function

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}
  1. Verify React and ReactDOM versions match
  2. Check your forwardRef import statement
  3. Check for multiple React instances
  4. Verify React version supports forwardRef
react — error
{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}
forwardRef is not a function

What this error means

The "forwardRef is not a function" error indicates that the React.forwardRef API is either undefined or not available in the current environment. This is a runtime error that prevents components from using ref forwarding functionality. forwardRef is a React API introduced in React 16.3 that allows components to pass refs through to child components. When this error occurs, it means the forwardRef function is not accessible, which can happen for several reasons including incorrect imports, version mismatches, or attempting to use forwardRef with libraries that don't support it (like older versions of Preact). The error typically manifests when trying to create a ref-forwarding component or when third-party libraries that use forwardRef internally cannot access the API properly.

Typical symptoms

  • TypeError: forwardRef is not a function when importing from React
  • Components using forwardRef fail to render at runtime
  • Third-party component libraries throw errors on initialization
  • Build completes successfully but application crashes in browser
  • Error occurs specifically with ref-forwarding components
  • Jest tests fail with "React.forwardRef is not a function"

Common causes

  1. Version mismatch between react and react-dom packages
  2. Incorrect import statement (importing from wrong package or path)
  3. Using Preact 8.x which doesn't support forwardRef (requires Preact X/10.x+)
  4. Webpack alias configuration pointing to incompatible React version
  5. Multiple React instances loaded in the same application
  6. Using React version older than 16.3 where forwardRef doesn't exist
  7. Outdated third-party libraries that have forwardRef compatibility issues
  8. Bundler configuration issues that incorrectly resolve React modules

How to fix "forwardRef is not a function"

1Verify React and ReactDOM versions match

Check your package.json to ensure react and react-dom have identical versions:

json
{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

If versions don't match, update them to the same version:

bash
npm install react@18.2.0 react-dom@18.2.0
# or
yarn add react@18.2.0 react-dom@18.2.0

Delete node_modules and lockfile, then reinstall:

bash
rm -rf node_modules package-lock.json
npm install
2Check your forwardRef import statement

Verify you're importing forwardRef correctly from React:

typescript
// Correct - named import from 'react'
import { forwardRef } from 'react';

// Also correct - accessing from React namespace
import React from 'react';
const MyComponent = React.forwardRef((props, ref) => {
  // component code
});

Common incorrect imports to avoid:

typescript
// WRONG - forwardRef is not in react-dom
import { forwardRef } from 'react-dom';

// WRONG - typo in import name
import { forwardRef } from 'raect';
3Check for multiple React instances

Multiple React instances can cause this error. Run this command to check:

bash
npm ls react
# or
yarn why react

If you see multiple versions, deduplicate them:

bash
# npm
npm dedupe

# yarn
yarn dedupe

# pnpm
pnpm dedupe

For webpack projects, add this to your webpack.config.js:

javascript
module.exports = {
  resolve: {
    alias: {
      react: require.resolve('react'),
      'react-dom': require.resolve('react-dom')
    }
  }
};
4Verify React version supports forwardRef

forwardRef was introduced in React 16.3. Check your React version:

bash
npm list react

If using an older version, upgrade to at least React 16.3:

bash
npm install react@^16.3.0 react-dom@^16.3.0
# or for the latest
npm install react@latest react-dom@latest

Note: React 19 no longer requires forwardRef - you can pass ref as a regular prop in function components.

5Check Preact compatibility if using Preact

If using Preact as a React alternative, verify you're on Preact X (10.x or higher):

bash
npm list preact

Preact 8.x does not support forwardRef. Upgrade to Preact X:

bash
npm install preact@latest preact-compat@latest

Update your webpack aliases for Preact X:

javascript
// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      react: 'preact/compat',
      'react-dom': 'preact/compat'
    }
  }
};
6Update outdated third-party libraries

Some libraries had forwardRef compatibility issues in older versions. Update them:

bash
# Check for outdated packages
npm outdated

# Update specific libraries known to have issues
npm update @reach/ui mobx-react react-router-dom

If a specific library version is causing issues, check its changelog and upgrade to a version with forwardRef support.

7Fix Jest test configuration if error occurs in tests

If the error occurs only in Jest tests, update your Jest configuration:

javascript
// jest.config.js
module.exports = {
  testEnvironment: 'jsdom',
  moduleNameMapper: {
    '^react$': require.resolve('react'),
    '^react-dom$': require.resolve('react-dom')
  },
  // Ensure all packages use the same React version
  moduleDirectories: ['node_modules', '<rootDir>/']
};

Also ensure your test setup uses the correct React version:

bash
npm install --save-dev @testing-library/react@latest

Advanced notes

React 19 Changes: In React 19, forwardRef is no longer necessary for function components. You can access refs directly as props, which simplifies component code and eliminates this entire class of errors. If upgrading to React 19, consider refactoring forwardRef components to use ref as a standard prop.

Bundle Analysis: If you're experiencing this in production builds but not development, use webpack-bundle-analyzer or similar tools to check if multiple React versions are being bundled. This often happens when using monorepos or linking local packages.

Third-Party Type Validation: The typeof React.forwardRef(...) check returns 'object', not 'function', which can break third-party libraries that validate component types using typeof Component === 'function'. This is expected behavior, not a bug. Libraries should use React.isValidElement or check for React.$$typeof instead.

Monorepo Considerations: In monorepo setups (Yarn workspaces, Lerna, pnpm workspaces), symlinked packages can cause multiple React instances. Use the workspace's hoisting mechanism or explicitly configure bundlers to resolve to a single React instance at the root level.

Frequently asked questions

What does "forwardRef is not a function" mean?
forwardRef API is either undefined or not available in the current environment. This is a runtime error that prevents components from using ref forwarding functionality. 3 that allows components to pass refs through to child components.
How do I fix "forwardRef is not a function"?
This error occurs when React.forwardRef cannot be imported or called properly, typically due to incorrect React imports, version mismatches between react and react-dom, or using incompatible library versions that don't support forwardRef.
What causes "forwardRef is not a function"?
Version mismatch between react and react-dom packages Incorrect import statement (importing from wrong package or path) Using Preact 8.x which doesn't support forwardRef (requires Preact X/10.x+)
Is the "forwardRef is not a function" error serious?
Yes. This is a high-severity error that usually blocks work until it is fixed, but the steps above resolve it.

Official resources & further reading