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.
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.
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.
If you are able to upgrade, install React 18. This is the most straightforward fix because useInsertionEffect is natively available.
npm install react@18 react-dom@18Or with yarn:
yarn add react@18 react-dom@18After upgrading, ensure all other packages are compatible with React 18.
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.
npm install [email protected]Check the library’s release notes or GitHub issues to find the last version that did not depend on useInsertionEffect.
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:
npm dedupeOr delete node_modules and package‑lock.json / yarn.lock and reinstall:
rm -rf node_modules package-lock.json
npm installIf 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:
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.
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.
React Hook useCallback has a missing dependency: 'variable'. Either include it or remove the dependency array react-hooks/exhaustive-deps
React Hook useCallback has a missing dependency
Cannot use private fields in class components without TS support
Cannot use private fields in class components without TS support
Cannot destructure property 'xxx' of 'undefined'
Cannot destructure property of undefined when accessing props
useNavigate() may be used only in the context of a <Router> component.
useNavigate() may be used only in the context of a Router component
Cannot find module or its corresponding type declarations
How to fix "Cannot find module or type declarations" in Vite