Error map

[Vue warn]: onMounted is called when there is no active component instance Vue: [Vue warn]: onMounted is called when there is no active component instance to be associated with

Vue · layer 1, On your device

Open the full error page →

Centre: this error. First ring: errors it is linked with (9). 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.

[Vue warn]: onMounted is called when there is no active component instance — Vue: [Vue warn]: onMounted is called when there is no active component instance to be associated with (Vue)[Vue warn]:…getActivePinia() was called but there was no active Pinia — Pinia: Error: [🍍]: "getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"? (Vue)getActivePinia() wa…[Vue warn]: injection "x" not found — Vue: [Vue warn]: injection "theme" not found. (Vue)[Vue warn]: injecti…[Vue warn]: Unhandled error during execution of setup/mounted hook — Vue: [Vue warn]: Unhandled error during execution of mounted hook / TypeError: Cannot read properties of undefined (reading 'x') (Vue)[Vue warn]: Unhandl…Vite: Failed to parse source / Unknown file extension ".vue" — Vite/Vue: [plugin:vite:import-analysis] Failed to parse source for import analysis — you may need to install appropriate plugins to handle the .vue file format (Vue)Vite: Failed to par…vue-loader was used without the corresponding plugin — Webpack: Error: [vue-loader] vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config. (Vue)vue-loader was used…ESLint Parsing error in .vue files — ESLint: Parsing error: Unexpected token < / Parsing error: '>' expected (vue-eslint-parser not configured) (Vue)ESLint Parsing erro…useAsyncData/useFetch must be called in setup (key/context) — Nuxt: [nuxt] [useAsyncData] key must be a string / useFetch only works inside setup, plugins or middleware (Vue)useAsyncData/useFet…[Vue warn]: Slot "default" invoked outside of the render function — Vue: [Vue warn]: Slot "default" invoked outside of the render function: this will not track dependencies used in the slot (Vue)[Vue warn]: Slot "d…this.$refs.x / ref.value is undefined or null before mount — Vue: TypeError: Cannot read properties of undefined (reading 'focus') — template ref accessed before the component is mounted (Vue)this.$refs.x / ref.…ENOENT — npm ERR! enoent ENOENT: no such file or directory, open '/path/package.json' (npm)ENOENTyarn not found — yarn: command not found (npm)yarn not foundTarget container is not a DOM element — Error: createRoot(...): Target container is not a DOM element. (React)Target container is…Property was accessed during render but is not defined — Vue: [Vue warn]: Property "x" was accessed during render but is not defined on instance (Vue)Property was access…[Vue warn]: Extraneous non-props attributes — Vue: [Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes (Vue)[Vue warn]: Extrane…[Vue warn]: Invalid prop: type check failed — Vue: [Vue warn]: Invalid prop: type check failed for prop "count". Expected Number with value 5, got String with value "5" (Vue)[Vue warn]: Invalid…[Vue warn]: Maximum recursive updates exceeded — Vue: [Vue warn]: Maximum recursive updates exceeded in component <Foo>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself (Vue)[Vue warn]: Maximum…[Vue warn]: Error in v-on handler / Error in mounted hook (Vue 2) — Vue 2: [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'x' of undefined" (Vue)[Vue warn]: Error i…Vue received a Component that was made a reactive object — Vue: [Vue warn]: Vue received a Component that was made a reactive object — mark it with `markRaw` or use `shallowRef` (Vue)Vue received a Comp…Vite failed to resolve import — [vite] Internal server error: Failed to resolve import "x" from "src/App.jsx". Does the file exist? (React)Vite failed to reso…Could not Fast Refresh — [vite] hmr invalidate … Could not Fast Refresh. Export is incompatible. (React)Could not Fast Refr…[Vue warn]: Duplicate keys found during update — Vue: [Vue warn]: Duplicate keys found during update: "5", possible duplicate or missing keys (Vue)[Vue warn]: Duplica…ERESOLVE — npm ERR! code ERESOLVE — unable to resolve dependency tree (npm)ERESOLVE[Vue warn]: Hydration node/text/children mismatch — Vue: [Vue warn]: Hydration text content mismatch / Hydration node mismatch: server rendered element contains more child nodes than client vdom (Vue)[Vue warn]: Hydrati…v-model cannot be used on a prop (compile error) — Vue: [@vue/compiler-sfc] v-model cannot be used on a prop, because local prop bindings are not writable (Vue)v-model cannot be u…react-hooks/exhaustive-deps — React Hook useEffect has a missing dependency (react-hooks/exhaustive-deps) (React)react-hooks/exhaust…Failed to compile: ESLint errors during next build — Next.js: Failed to compile. ./src/app/page.tsx 12:7 Error: 'x' is assigned a value but never used. @typescript-eslint/no-unused-vars (Next.js)Failed to compile: …TS1005: ';' expected / ',' expected (syntax error) — TypeScript: error TS1005: ';' expected. (TypeScript)TS1005: ';' expecte…Nuxt: Hydration completed but contained mismatches — Nuxt: [Vue warn]: Hydration completed but contains mismatches. (Vue)Nuxt: Hydration com…Nuxt: window/document/localStorage is not defined (SSR) — Nuxt: ReferenceError: window is not defined / 500 Internal Server Error during SSR (Vue)Nuxt: window/docume…Nuxt: Failed to fetch dynamically imported module (after deploy) — Nuxt: [nuxt] error caught during app initialization TypeError: Failed to fetch dynamically imported module / Loading chunk failed (Vue)Nuxt: Failed to fet…Avoid mutating a prop directly — Vue: [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders (Vue)Avoid mutating a pr…[Vue warn]: Write operation failed: computed value is readonly — Vue: [Vue warn]: Write operation failed: computed value is readonly (Vue)[Vue warn]: Write o…[Vue warn]: Component is missing template or render function — Vue: [Vue warn]: Component is missing template or render function. (Vue)[Vue warn]: Compone…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()? (React)refs on function co…Duplicate attribute (Vue template) — Vue: [plugin:vite:vue] Duplicate attribute. / [vue/no-duplicate-attributes] Duplicate attribute 'class' (Vue)Duplicate attribute…

Directly related (9)

getActivePinia() was called but there was no active PiniaVue

Pinia: Error: [🍍]: "getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"?

A store was used before Pinia was installed or outside a component context (router guards, plain modules).

[Vue warn]: injection "x" not foundVue

Vue: [Vue warn]: injection "theme" not found.

`inject("theme")` ran but no ancestor provided it.

[Vue warn]: Unhandled error during execution of setup/mounted hookVue

Vue: [Vue warn]: Unhandled error during execution of mounted hook / TypeError: Cannot read properties of undefined (reading 'x')

An exception was thrown inside a lifecycle hook, watcher, event handler or render, and Vue logs it with the context.

Vite: Failed to parse source / Unknown file extension ".vue"Vue

Vite/Vue: [plugin:vite:import-analysis] Failed to parse source for import analysis — you may need to install appropriate plugins to handle the .vue file format

Vite can't process `.vue` files because the Vue plugin isn't installed/enabled.

vue-loader was used without the corresponding pluginVue

Webpack: Error: [vue-loader] vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

Webpack config uses `vue-loader` but doesn't add its plugin.

ESLint Parsing error in .vue filesVue

ESLint: Parsing error: Unexpected token < / Parsing error: '>' expected (vue-eslint-parser not configured)

ESLint can't parse `.vue` files because the Vue parser isn't configured.

useAsyncData/useFetch must be called in setup (key/context)Vue

Nuxt: [nuxt] [useAsyncData] key must be a string / useFetch only works inside setup, plugins or middleware

`useFetch`/`useAsyncData` were used in an event handler, after an await, or without a key where one is required.

[Vue warn]: Slot "default" invoked outside of the render functionVue

Vue: [Vue warn]: Slot "default" invoked outside of the render function: this will not track dependencies used in the slot

A slot function was called outside render (in `setup`, a computed or watcher), so reactivity isn't tracked.

this.$refs.x / ref.value is undefined or null before mountVue

Vue: TypeError: Cannot read properties of undefined (reading 'focus') — template ref accessed before the component is mounted

A template ref (`ref="input"`) is read before the element exists (setup, created, or before `v-if` renders it).

Two steps away (26)

ENOENTnpm

npm ERR! enoent ENOENT: no such file or directory, open '/path/package.json'

npm ran in a directory without a package.json.

yarn not foundnpm

yarn: command not found

Yarn isn’t installed (or not enabled through Corepack) on this machine.

Target container is not a DOM elementReact

Error: createRoot(...): Target container is not a DOM element.

The element passed to createRoot/render doesn’t exist when the script runs.

Property was accessed during render but is not definedVue

Vue: [Vue warn]: Property "x" was accessed during render but is not defined on instance

The template references a variable/function that the component doesn’t expose.

[Vue warn]: Extraneous non-props attributesVue

Vue: [Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes

Attributes (class, style, listeners) passed to a component can't be applied because the component has multiple root nodes.

[Vue warn]: Invalid prop: type check failedVue

Vue: [Vue warn]: Invalid prop: type check failed for prop "count". Expected Number with value 5, got String with value "5"

A prop received a value of the wrong type.

[Vue warn]: Maximum recursive updates exceededVue

Vue: [Vue warn]: Maximum recursive updates exceeded in component <Foo>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself

A watcher/computed/render effect keeps changing the state it depends on, creating an infinite update loop.

[Vue warn]: Error in v-on handler / Error in mounted hook (Vue 2)Vue

Vue 2: [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'x' of undefined"

An exception was thrown inside a Vue 2 event handler or lifecycle hook, logged with context.

Vue received a Component that was made a reactive objectVue

Vue: [Vue warn]: Vue received a Component that was made a reactive object — mark it with `markRaw` or use `shallowRef`

A component definition was stored in a `ref`/`reactive`, making Vue proxy it unnecessarily.

Vite failed to resolve importReact

[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.

Could not Fast RefreshReact

[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.

[Vue warn]: Duplicate keys found during updateVue

Vue: [Vue warn]: Duplicate keys found during update: "5", possible duplicate or missing keys

Items in a `v-for` list share the same `:key`, which breaks Vue's diffing.

ERESOLVEnpm

npm ERR! code ERESOLVE — unable to resolve dependency tree

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

[Vue warn]: Hydration node/text/children mismatchVue

Vue: [Vue warn]: Hydration text content mismatch / Hydration node mismatch: server rendered element contains more child nodes than client vdom

Server-rendered HTML differs from what the client renders on first load.

v-model cannot be used on a prop (compile error)Vue

Vue: [@vue/compiler-sfc] v-model cannot be used on a prop, because local prop bindings are not writable

A template uses `v-model` on a prop (or a `v-for` alias), which can't be assigned.

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.

Failed to compile: ESLint errors during next buildNext.js

Next.js: Failed to compile. ./src/app/page.tsx 12:7 Error: 'x' is assigned a value but never used. @typescript-eslint/no-unused-vars

`next build` runs ESLint and fails the build on lint errors.

TS1005: ';' expected / ',' expected (syntax error)TypeScript

TypeScript: error TS1005: ';' expected.

The parser hit a syntax error — missing punctuation, mismatched brackets, or an unsupported syntax for your TypeScript version.

Nuxt: Hydration completed but contained mismatchesVue

Nuxt: [Vue warn]: Hydration completed but contains mismatches.

Server HTML and client render differed; Vue patched the DOM but logs the mismatch.

Nuxt: window/document/localStorage is not defined (SSR)Vue

Nuxt: ReferenceError: window is not defined / 500 Internal Server Error during SSR

Code touching browser globals ran on the server during Nuxt SSR.

Nuxt: Failed to fetch dynamically imported module (after deploy)Vue

Nuxt: [nuxt] error caught during app initialization TypeError: Failed to fetch dynamically imported module / Loading chunk failed

A browser tab running the old build requests chunk files that were replaced by a new deployment.

Avoid mutating a prop directlyVue

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.

[Vue warn]: Write operation failed: computed value is readonlyVue

Vue: [Vue warn]: Write operation failed: computed value is readonly

You assigned to a `computed` that has no setter.

[Vue warn]: Component is missing template or render functionVue

Vue: [Vue warn]: Component is missing template or render function.

A component object has neither `template` nor `render`, or an SFC import resolved wrongly.

refs on function componentsReact

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.

Duplicate attribute (Vue template)Vue

Vue: [plugin:vite:vue] Duplicate attribute. / [vue/no-duplicate-attributes] Duplicate attribute 'class'

The same attribute appears twice on an element in a template.