| Objects are not valid as a React child |
Error: Objects are not valid as a React child |
You tried to render a plain object (or a Promise/Date) directly in JSX; React can only render strings, number… |
| No QueryClient set |
Error: No QueryClient set, use QueryClientProvider to set one |
TanStack Query hooks ran outside a QueryClientProvider (or a duplicate copy of the library is installed). |
| Functions cannot be passed |
Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". |
A Server Component passed a function prop to a Client Component. |
| Module parse failed |
Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type |
Webpack found syntax it can’t parse because no loader is configured for that file (JSX, TypeScript, CSS, or m… |
| next/image hostname |
Error: Invalid src prop on `next/image`, hostname "x" is not configured under images in your `next.config.js` |
next/image refuses to optimize images from domains not allowed in next.config.js. |
| Hydration failed |
Error: Hydration failed because the initial UI does not match what was rendered on the server |
The HTML rendered on the server differs from the first client render, so React (Next.js/Remix) can’t attach t… |
| Minified React error |
Error: Minified React error #31; visit https://react.dev/errors/31 for the full message |
A production React build threw an error whose message was shortened to a number. |
| useNavigate outside Router |
Error: useNavigate() may be used only in the context of a <Router> component. |
A React Router hook ran in a component that isn’t rendered inside a Router provider. |
| Jest ESM |
Jest: SyntaxError: Cannot use import statement outside a module (Jest encountered an unexpected token) |
Jest tried to run untransformed ES module syntax — usually from a dependency in node_modules. |
| React must be in scope |
ReferenceError: React is not defined / 'React' must be in scope when using JSX |
JSX was compiled with the classic runtime, which needs React imported in every file. |
| not wrapped in act |
Warning: An update to Component inside a test was not wrapped in act(...) |
A component updated state after the test’s synchronous assertions — async work wasn’t awaited. |
| findDOMNode deprecated |
Warning: findDOMNode is deprecated and will be removed in the next major release. |
A component (often an old library like react-transition-group v1, react-draggable) uses findDOMNode, which St… |
| Functions not valid as child |
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. |
A function (usually a component itself) was rendered instead of calling/rendering it as an element. |
| cross-origin error |
Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. |
An error happened in a script loaded from another origin, so the browser hid the details from React. |
| Element type is invalid |
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined |
JSX referenced a component that is undefined — almost always a default/named import mismatch. |
| Invalid hook call |
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. |
A hook ran outside a function component/custom hook, conditionally — or two copies of React are loaded. |
| Maximum update depth |
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. |
A component keeps updating itself in an effect or lifecycle — usually a useEffect that sets state its own dep… |
| non-serializable value |
A non-serializable value was detected in the state / in an action, in the path |
Redux Toolkit’s middleware found a Date, Promise, class instance or function in state or an action. |
| Prerender error |
Error occurred prerendering page "/x". Read more: https://nextjs.org/docs/messages/prerender-error |
A page threw an error while Next.js was rendering it at build time. |
| async Client Component |
Error: async/await is not yet supported in Client Components, only Server Components. |
A component marked "use client" was declared async. |
| validateDOMNesting |
Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. |
The JSX produces invalid HTML nesting, which also causes hydration mismatches in SSR. |
| Adjacent JSX elements |
Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? |
A component returns two sibling JSX elements without a single parent. |
| Suspended synchronous input |
Error: A component suspended while responding to synchronous input. |
A component suspended (lazy load or data fetch) during an update that wasn’t wrapped in a transition, and the… |
| Target container is not a DOM element |
Error: createRoot(...): Target container is not a DOM element. |
The element passed to createRoot/render doesn’t exist when the script runs. |
| Nothing was returned from render |
Error: Nothing was returned from render. This usually means a return statement is missing. |
A component returned undefined (React 17 and earlier) — usually a missing return or a return followed by a li… |
| useContext undefined |
TypeError: Cannot destructure property 'user' of 'useContext(...)' as it is undefined. |
A component read a context with no matching Provider above it. |
| key is not a prop |
Warning: `key` is not a prop. Trying to access it will result in `undefined` being returned. |
A component tried to read props.key, which React reserves and never passes down. |
| uncontrolled to controlled |
Warning: A component is changing an uncontrolled input to be controlled |
An input’s `value` started as `undefined` (uncontrolled) and later became a defined value (controlled), or vi… |
| unique key prop |
Warning: Each child in a list should have a unique "key" prop |
When rendering a list with `.map()`, each element needs a stable, unique `key` so React can track items betwe… |
| ReactDOM.render deprecated |
Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. |
The app uses the legacy root API, so React 18 features (concurrent rendering, automatic batching) are disable… |
| react-scripts not found |
'react-scripts' is not recognized as an internal or external command / react-scripts: command not found |
node_modules is missing or broken, so the react-scripts binary isn’t available. |
| Dynamic server usage |
Error: Dynamic server usage: Route /x couldn't be rendered statically because it used `cookies` |
Next.js tried to statically render a route that reads request-specific data (cookies, headers, searchParams). |
| Too many re-renders |
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. |
A state update runs during render, which triggers another render, which updates state again — forever. |
| Unable to find an element |
TestingLibraryElementError: Unable to find an element with the text: x |
getBy* found no matching element in the rendered output. |
| setState during render |
Warning: Cannot update a component (`Parent`) while rendering a different component (`Child`) |
A child component updated a parent’s state during its render instead of in an effect or event handler. |
| defaultProps deprecated |
Warning: Support for defaultProps will be removed from function components in a future major release. |
A function component (often inside a library) uses Component.defaultProps. |
| async useEffect |
Warning: useEffect must not return anything besides a function, which is used for clean-up. It looks like you wrote useEffect(async () => ...) |
An async function was passed directly to useEffect, so it returns a Promise instead of a cleanup function. |
| Could not Fast Refresh |
[vite] hmr invalidate … Could not Fast Refresh. Export is incompatible. |
Fast Refresh fell back to a full reload because the file exports non-components alongside components. |
| Vite failed to resolve import |
[vite] Internal server error: Failed to resolve import "x" from "src/App.jsx". Does the file exist? |
Vite couldn’t find an imported file or package. |
| Actions must be plain objects |
Error: Actions must be plain objects. Instead, the actual type was: 'function'. |
A function (thunk) was dispatched but the thunk middleware isn’t configured. |
| Prop did not match |
Warning: Prop `className` did not match. Server: "x" Client: "y" |
A prop rendered on the server differs from the client — usually CSS-in-JS class names or random IDs. |
| non-boolean attribute |
Warning: Received `true` for a non-boolean attribute `x`. |
A boolean was passed to a DOM attribute that expects a string, or a custom prop leaked through to a DOM eleme… |
| useLayoutEffect SSR |
Warning: useLayoutEffect does nothing on the server |
A component using useLayoutEffect was server-rendered, where layout effects can’t run. |
| needs useState |
You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client" |
In the Next.js App Router, a component using hooks or browser APIs is rendered as a Server Component. |
| Can't resolve 'fs' |
Module not found: Can't resolve 'fs' (Next.js / webpack 5) |
A Node.js built-in (fs, path, crypto, net) is imported into code that runs in the browser bundle. |
| componentWillMount renamed |
Warning: componentWillMount has been renamed, and is not recommended for use. |
A class component uses legacy lifecycle methods (componentWillMount/WillReceiveProps/WillUpdate). |
| refs on function components |
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? |
A ref was passed to a function component that doesn’t forward it. |
| Invalid DOM property |
Warning: Invalid DOM property `class`. Did you mean `className`? |
HTML attribute names were used in JSX instead of their React/DOM property names. |
| react-hooks/exhaustive-deps |
React Hook useEffect has a missing dependency (react-hooks/exhaustive-deps) |
ESLint warns that the effect reads a value that isn’t in its dependency array, so it may use a stale value. |
| No routes matched |
No routes matched location "/x" |
React Router found no route definition for the current URL. |
| NextRouter was not mounted |
Error: NextRouter was not mounted. |
next/router’s useRouter was used inside the App Router (app/ directory), which uses next/navigation instead. |