React 19: Invalid hook call inside iframe or Shadow DOM
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM).
Immediate Remediation
bash
Ensure the iframe/Shadow DOM root uses the same React instance by adding to next.config.js: experimental: { optimizePackageImports: ['react', 'react-dom'] } and verify with `npm ls react react-dom`.Root Cause Analysis
When rendering React into an iframe or Shadow DOM, the bundled React instance inside the portal can resolve to a different copy of React (e.g. duplicate react-dom in node_modules), breaking the hook dispatcher and throwing the invalid hook call error.
Verification & Guardrails
- Run `npm ls react react-dom` to confirm only one version of each is installed.
- If using a monorepo, add `resolutions` in package.json to force a single React version.
- This error also appears when calling hooks from a class component or a plain function; verify the component is a function component.
Have a custom or uncategorized crash?
Run your trace through our in-memory client privacy sandbox for instant SRE remediation.