Error map

useLayoutEffect SSR Warning: useLayoutEffect does nothing on the server

React · layer 1, On your device

Open the full error page →

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.

useLayoutEffect SSR — Warning: useLayoutEffect does nothing on the server (React)useLayoutEf…Hydration failed — Error: Hydration failed because the initial UI does not match what was rendered on the server (React)Hydration failedvalidateDOMNesting — Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. (React)validateDOMNestingMaximum update depth — Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. (React)Maximum update depthInvalid hook call — Error: Invalid hook call. Hooks can only be called inside of the body of a function component. (React)Invalid hook callasync useEffect — Warning: useEffect must not return anything besides a function, which is used for clean-up. It looks like you wrote useEffect(async () => ...) (React)async useEffectProp did not match — Warning: Prop `className` did not match. Server: "x" Client: "y" (React)Prop did not matchreact-hooks/exhaustive-deps — React Hook useEffect has a missing dependency (react-hooks/exhaustive-deps) (React)react-hooks/exhaust…ReferenceError — ReferenceError: x is not defined (JavaScript)ReferenceErrorObjects are not valid as a React child — Error: Objects are not valid as a React child (React)Objects are not val…Can't resolve 'fs' — Module not found: Can't resolve 'fs' (Next.js / webpack 5) (React)Can't resolve 'fs'uncontrolled to controlled — Warning: A component is changing an uncontrolled input to be controlled (React)uncontrolled to con…Adjacent JSX elements — Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (React)Adjacent JSX elemen…setState during render — Warning: Cannot update a component (`Parent`) while rendering a different component (`Child`) (React)setState during ren…Too many re-renders — Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. (React)Too many re-rendersActions must be plain objects — Error: Actions must be plain objects. Instead, the actual type was: 'function'. (React)Actions must be pla…non-serializable value — A non-serializable value was detected in the state / in an action, in the path (React)non-serializable va…ERESOLVE — npm ERR! code ERESOLVE — unable to resolve dependency tree (npm)ERESOLVEAbortError — AbortError: The user aborted a request. / signal is aborted without reason (JavaScript)AbortErrorbody already used — TypeError: Failed to execute 'json' on 'Response': body stream already read (JavaScript)body already usedEvent loop is closed — RuntimeError: Event loop is closed (Python)Event loop is closednot wrapped in act — Warning: An update to Component inside a test was not wrapped in act(...) (React)not wrapped in act

Directly related (7)

Hydration failedReact

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.

validateDOMNestingReact

Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.

The JSX produces invalid HTML nesting, which also causes hydration mismatches in SSR.

Maximum update depthReact

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 dependencies change.

Invalid hook callReact

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.

async useEffectReact

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.

Prop did not matchReact

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.

react-hooks/exhaustive-depsReact

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.

Two steps away (14)

ReferenceErrorJavaScript

ReferenceError: x is not defined

Code refers to a variable or function name that doesn’t exist in the current scope.

Objects are not valid as a React childReact

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…

Can't resolve 'fs'React

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.

uncontrolled to controlledReact

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.

Adjacent JSX elementsReact

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.

setState during renderReact

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.

Too many re-rendersReact

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.

Actions must be plain objectsReact

Error: Actions must be plain objects. Instead, the actual type was: 'function'.

A function (thunk) was dispatched but the thunk middleware isn’t configured.

non-serializable valueReact

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.

ERESOLVEnpm

npm ERR! code ERESOLVE — unable to resolve dependency tree

npm 7+ found conflicting peer dependency requirements and refuses to install a broken tree.

AbortErrorJavaScript

AbortError: The user aborted a request. / signal is aborted without reason

A fetch was cancelled through an AbortController (or the browser cancelled it).

body already usedJavaScript

TypeError: Failed to execute 'json' on 'Response': body stream already read

A fetch Response body was consumed twice (e.g. calling .text() then .json()).

Event loop is closedPython

RuntimeError: Event loop is closed

Async code tried to use an event loop that has already been shut down.

not wrapped in actReact

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.