Error map
Minified React error Error: Minified React error #31; visit https://react.dev/errors/31 for the full message
React · layer 1, On your device
Centre: this error. First ring: errors it is linked with (7). Outer ring: what those are linked with. Colours show the layer of a request each error belongs to. Click any dot to re-centre the map on it; hover to follow its connections. The centre dot opens the error page.
Directly related (7)
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, numbers, elements and arra…
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 to it.
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.
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.
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.
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.
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 vice versa.
Two steps away (21)
TypeError: Cannot read properties of undefined (reading 'x')
You tried to access a property on a value that is `undefined` (or `null`) — usually data that hasn’t loaded yet or a wrong proper…
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.
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 between renders.
ReferenceError: x is not defined
Code refers to a variable or function name that doesn’t exist in the current scope.
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.
Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
The JSX produces invalid HTML nesting, which also causes hydration mismatches in SSR.
CORS Error: No 'Access-Control-Allow-Origin' header is present
The browser blocked a cross-origin request because the server’s response didn’t include the CORS headers allowing your site’s ori…
Mixed Content: The page was loaded over HTTPS, but requested an insecure resource
An HTTPS page tried to load a script, API or image over plain HTTP, and the browser blocked (or warned about) it.
SecurityError: Blocked a frame with origin "x" from accessing a cross-origin frame.
Script tried to read or modify an iframe (or window) from another origin.
Node.js: [UnhandledPromiseRejection] — This error originated either by throwing inside of an async function without a catch block
A promise rejected and nothing handled it; since Node 15 this crashes the process.
SyntaxError: await is only valid in async functions and the top level bodies of modules
await was used inside a function that isn’t async (or in a classic, non-module script).
AbortError: The user aborted a request. / signal is aborted without reason
A fetch was cancelled through an AbortController (or the browser cancelled it).
SyntaxError: Invalid regular expression: /x/: Unterminated group
A regex pattern has invalid syntax — unbalanced parentheses/brackets or unescaped special characters.
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 line break.
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.
java.lang.IllegalStateException
A method was called when the object wasn’t in the right state for it.
TypeError: Cannot assign to read only property 'x' of object
Code tried to modify a frozen object, a getter-only property, or immutable state.
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.
Error: Actions must be plain objects. Instead, the actual type was: 'function'.
A function (thunk) was dispatched but the thunk middleware isn’t configured.
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.
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).
Map another error
Popular: 4035004000xC000007BTypeErrorCritical error404NullPointerException