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

ReactINTERMEDIATEMEDIUMUpdated Dec 10, 2025· 108 views

This error occurs when a library or code tries to use the React useInsertionEffect hook in a React version that does not support it. useInsertionEffect was introduced in React 18 for CSS-in-JS libraries to inject styles at the right time. If you are using React 17 or earlier, or a mismatched version of React and a CSS-in-JS library, you will encounter this issue.

Quick fix

Fixes useInsertionEffect is not available in this React build

npm install react@18 react-dom@18
  1. Check your React version
  2. Upgrade React to version 18 or later
  3. Downgrade the CSS‑in‑JS library
  4. Resolve duplicate React installations
react — error
npm install react@18 react-dom@18
useInsertionEffect is not available in this React build
shell
npm install react@18 react-dom@18

What this error means

The useInsertionEffect hook is a React API designed primarily for CSS-in-JS library authors to inject <style> tags into the DOM before layout effects run. It was added in React 18 to solve timing issues with style injection. When you see this error, it means your code or a library you depend on is trying to import and use useInsertionEffect, but the current React build (likely React 17 or older) does not export this hook. This is a version mismatch problem between your React version and the library expecting React 18+ features.

Typical symptoms

  • Runtime error: "export 'useInsertionEffect' (imported as 'useInsertionEffect') was not found in 'react'"
  • Application fails to load or crashes when using a CSS-in-JS library like react-jss (version 10.9.1-alpha.2 or newer)
  • Bundler (Webpack, Vite) reports missing export during build or in the browser console
  • The error appears only when running with React 17 while the library expects React 18

Common causes

  1. Using a CSS-in-JS library (e.g., react-jss, styled-components) that has been updated to use useInsertionEffect for better performance, but your project still uses React 17.
  2. Accidentally installing React 18 in a part of your dependency tree while the main React peer dependency is set to 17, causing version conflicts.
  3. A library you depend on declares a peer dependency on React 18+ but your project satisfies it with an older version.
  4. Your bundler is resolving different React versions across packages (duplicate React installation).

How to fix "useInsertionEffect is not available in this React build"

1Check your React version

Open your package.json and verify the version of React you have installed. Look for a line like "react": "^17.0.2" or "react": "^18.0.0". You can also run npm list react or yarn why react to see the resolved version and detect duplicates.

2Upgrade React to version 18 or later

If you are able to upgrade, install React 18. This is the most straightforward fix because useInsertionEffect is natively available.

bash
npm install react@18 react-dom@18

Or with yarn:

bash
yarn add react@18 react-dom@18

After upgrading, ensure all other packages are compatible with React 18.

3Downgrade the CSS‑in‑JS library

If you cannot upgrade React, downgrade the library that requires useInsertionEffect to a version that still supports React 17. For example, with react‑jss, you might need to use version 10.9.0 or earlier.

bash
npm install react-jss@10.9.0

Check the library’s release notes or GitHub issues to find the last version that did not depend on useInsertionEffect.

4Resolve duplicate React installations

Sometimes multiple versions of React end up in node_modules. Use your package manager’s deduplication or check with npm ls react. You can try:

bash
npm dedupe

Or delete node_modules and package‑lock.json / yarn.lock and reinstall:

bash
rm -rf node_modules package-lock.json
npm install
5Use an alias in your bundler (temporary workaround)

If you must stay on React 17 but the library insists on importing useInsertionEffect, you can alias the hook to useEffect or useLayoutEffect in your bundler configuration. This is a hack and may break style injection timing.

For Webpack, add to webpack.config.js:

javascript
resolve: {
  alias: {
    react: path.resolve(__dirname, 'node_modules/react'),
    'react/jsx-runtime': path.resolve(__dirname, 'node_modules/react/jsx-runtime')
  },
  fallback: {
    'useInsertionEffect': require.resolve('./src/shims/useInsertionEffect.js')
  }
}

Create a shim file that exports a no‑op function or delegates to useEffect.

Advanced notes

useInsertionEffect is a low‑level hook intended exclusively for CSS‑in‑JS libraries that need to inject <style> tags before the browser performs layout. If you are not authoring such a library, you should never need to call it directly. The React team recommends avoiding runtime style injection altogether when possible; instead, use static extraction or inline styles for dynamic values. If you maintain a library that supports both React 17 and 18, consider feature‑detecting the React version or providing separate entry points.

Frequently asked questions

What does "useInsertionEffect is not available in this React build" mean?
The useInsertionEffect hook is a React API designed primarily for CSS-in-JS library authors to inject <style> tags into the DOM before layout effects run. It was added in React 18 to solve timing issues with style injection. When you see this error, it means your code or a library you depend on is trying to import and use useInsertionEffect, but the current React build (likely React 17 or older) does not export this hook.
How do I fix "useInsertionEffect is not available in this React build"?
This error occurs when a library or code tries to use the React useInsertionEffect hook in a React version that does not support it. useInsertionEffect was introduced in React 18 for CSS-in-JS libraries to inject styles at the right time. If you are using React 17 or earlier, or a mismatched version of React and a CSS-in-JS library, you will encounter this issue.
What causes "useInsertionEffect is not available in this React build"?
Using a CSS-in-JS library (e.g., react-jss, styled-components) that has been updated to use useInsertionEffect for better performance, but your project still uses React 17. Accidentally installing React 18 in a part of your dependency tree while the main React peer dependency is set to 17, causing version conflicts. A library you depend on declares a peer dependency on React 18+ but your project satisfies it with an older version.
Is the "useInsertionEffect is not available in this React build" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading