Error map
TS2686: 'React' refers to a UMD global, but the current file is a module TypeScript: error TS2686: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.
TypeScript · layer 1, On your device
Centre: this error. First ring: errors it is linked with (12). 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 (12)
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…
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.
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.
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.
Warning: Invalid DOM property `class`. Did you mean `className`?
HTML attribute names were used in JSX instead of their React/DOM property names.
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 element.
TypeScript: error TS1005: ';' expected.
The parser hit a syntax error — missing punctuation, mismatched brackets, or an unsupported syntax for your TypeScript version.
TypeScript: error TS1208: 'index.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement
With `isolatedModules`, every file must be a module (have an import or export).
TypeScript: error TS1192: Module '"./utils"' has no default export.
You used `import x from "./mod"` but the module only has named exports.
TypeScript: error TS1128: Declaration or statement expected.
The parser found a token where a declaration or statement should start — usually stray braces/parentheses or code outside a funct…
Next.js: Error: Invalid hook call. Hooks can only be called inside of the body of a function component — Cannot read properties of null (reading 'useContext')
Two copies of React are loaded (or React/ReactDOM versions differ), so hooks can't find the active renderer.
npm: ERESOLVE unable to resolve dependency tree — Found: react@19.0.0 / Could not resolve dependency: peer react@"^18.2.0" from some-lib
A package requires a React version different from the one installed with Next.js.
Two steps away (35)
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.
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.
API Error: Invalid or unsupported API version
The API version you requested — in the URL, a header or the SDK config — doesn’t exist or has been retired.
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.
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.
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 there is no Suspense bo…
TypeScript: error TS2604: JSX element type 'Foo' does not have any construct or call signatures.
You used something as a JSX component that TypeScript doesn't see as a component (not a function/class returning JSX).
TypeScript: error TS17004: Cannot use JSX unless the '--jsx' flag is provided.
A `.tsx` file contains JSX but tsconfig has no `jsx` option.
DOMException: Failed to execute 'querySelector' on 'Document': 'x' is not a valid selector
The CSS selector string is invalid — often an ID starting with a digit or containing special characters.
Error: createRoot(...): Target container is not a DOM element.
The element passed to createRoot/render doesn’t exist when the script runs.
Vue: [Vue warn]: Failed to locate Teleport target with selector "#modal". Note the target element must exist before the component is mounted
`` can't find its target element when mounting.
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.
Vue: [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders
A child component assigned to a prop. Props flow one way — the parent owns the value.
Next.js: Error: Failed prop type: The prop `href` expects a `string` or `object` in `<Link>`, but got `undefined` instead
`` received `undefined` (or another invalid value), so Next.js can't build the link.
SyntaxError: Unexpected token '<' (HTML served instead of JavaScript)
The browser loaded a .js file but received HTML (an error page or the SPA index.html).
SyntaxError: Unexpected end of input
The parser reached the end of the code (or JSON) while still expecting more — a missing } ) ] or empty JSON.
SyntaxError: missing ) after argument list
A function call’s parentheses are unbalanced — often an unescaped quote or a missing comma/plus.
Error [ERR_REQUIRE_ESM]: require() of ES Module not supported
CommonJS code used `require()` on a package that is ES-module-only (node-fetch 3, chalk 5, nanoid 4, got 12…).
SyntaxError: Cannot use import statement outside a module
An `import` statement ran in a context treated as CommonJS (Node without "type": "module", a browser script without type="module"…
TypeError [ERR_IMPORT_ATTRIBUTE_MISSING]: Module needs an import attribute of "type: json"
An ES module imported a .json file without the required import attribute.
TypeError: x is not a function
You called something as a function, but its value is not a function (it’s undefined, a string, an object…).
TypeError: x is not a constructor
new was used with something that isn’t a class/constructor — usually a wrong import.
ReferenceError: Cannot access 'x' before initialization
A let/const/class was used before its declaration line ran (temporal dead zone) — often a circular import.
SyntaxError: Identifier 'x' has already been declared
The same let/const/class name was declared twice in the same scope.
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).
SyntaxError: Unexpected identifier
The parser found a name where it expected punctuation — usually a missing comma, operator or quote.
npm ERR! code ERESOLVE — unable to resolve dependency tree
npm 7+ found conflicting peer dependency requirements and refuses to install a broken tree.
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.
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.
Next.js: FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory (during next build)
Node ran out of memory while building a large Next.js app (or on a small CI/Vercel runner).
Next.js: Error occurred prerendering page "/blog" TypeError: fetch failed { cause: Error: connect ECONNREFUSED 127.0.0.1:3000 }
During `next build` a page tried to fetch data from a server (often your own app or an API) that isn't running yet.
Next.js: ⨯ Conflicting app and page file was found, please remove the conflicting files to continue: "pages/index.tsx" - "app/page.tsx"
The same URL is defined in both the `app` and `pages` directories.
Map another error
Popular: 500403400ORA-009331064Critical errorFileNotFoundException assemblyTypeError