Error map

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 · layer 1, On your device

Open the full error page →

Centre: this error. First ring: errors it is linked with (8). 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 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 receive…Failed to resolve component — Vue: [Vue warn]: Failed to resolve component: x (Vue)Failed to resolve c…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…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…[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]: Component is missing template or render function — Vue: [Vue warn]: Component is missing template or render function. (Vue)[Vue warn]: Compone…[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]: 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…[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…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…Component provided template option but runtime compilation is not supported — Vue: [Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js" (Vue)Component provided …NavigationDuplicated: Avoided redundant navigation to current location — Vue Router: Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/home" (Vue)NavigationDuplicate…non-boolean attribute — Warning: Received `true` for a non-boolean attribute `x`. (React)non-boolean attribu…key is not a prop — Warning: `key` is not a prop. Trying to access it will result in `undefined` being returned. (React)key is not a propTS2741: Property is missing in type but required in type — TypeScript: error TS2741: Property 'email' is missing in type '{ name: string; }' but required in type 'User'. (TypeScript)TS2741: Property is…uncontrolled to controlled — Warning: A component is changing an uncontrolled input to be controlled (React)uncontrolled to con…cannot lock ref — error: cannot lock ref 'refs/remotes/origin/x': is at … but expected … / unable to update local ref (Git)cannot lock refbroken ref — warning: ignoring broken ref refs/remotes/origin/HEAD (Git)broken ref[Vue warn]: Set operation on key failed: target is readonly — Vue: [Vue warn]: Set operation on key "name" failed: target is readonly. (Vue)[Vue warn]: Set ope…[Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime — Vue 2: [Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option (Vue)[Vue warn]: Avoid a…ELIFECYCLE — npm ERR! code ELIFECYCLE / Command failed with exit code 1 (npm)ELIFECYCLEgyp ERR! — gyp ERR! build error / node-gyp rebuild failed (npm)gyp ERR!ERR_OSSL_EVP_UNSUPPORTED — Error: error:0308010C:digital envelope routines::unsupported (Node.js)ERR_OSSL_EVP_UNSUPP…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…[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]: onMount…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…

Directly related (8)

Failed to resolve componentVue

Vue: [Vue warn]: Failed to resolve component: x

The template uses a component tag that isn’t registered or imported where it’s used.

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.

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.

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

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

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

Two steps away (18)

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.

Component provided template option but runtime compilation is not supportedVue

Vue: [Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js"

A component uses a string `template` but the runtime-only Vue build has no compiler.

NavigationDuplicated: Avoided redundant navigation to current locationVue

Vue Router: Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/home"

`router.push` to the route you're already on, rejecting the promise (Vue Router 3.1+).

non-boolean attributeReact

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.

key is not a propReact

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.

TS2741: Property is missing in type but required in typeTypeScript

TypeScript: error TS2741: Property 'email' is missing in type '{ name: string; }' but required in type 'User'.

An object lacks one required property of the target type.

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.

cannot lock refGit

error: cannot lock ref 'refs/remotes/origin/x': is at … but expected … / unable to update local ref

Git couldn’t update a reference — stale remote-tracking refs, case-only branch name clashes, or a leftover lock file.

broken refGit

warning: ignoring broken ref refs/remotes/origin/HEAD

A ref file is empty or points to a missing object — usually refs/remotes/origin/HEAD after the default branch changed.

[Vue warn]: Set operation on key failed: target is readonlyVue

Vue: [Vue warn]: Set operation on key "name" failed: target is readonly.

You mutated a readonly reactive object (props, `readonly()`, `shallowReadonly`, or a frozen/store state).

[Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtimeVue

Vue 2: [Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option

In Vue 2 you added a property to the root data (or instance) after creation, which can't be made reactive.

ELIFECYCLEnpm

npm ERR! code ELIFECYCLE / Command failed with exit code 1

An npm script (build, start, test, postinstall) exited with an error. ELIFECYCLE is only the wrapper — the real error is printed…

gyp ERR!npm

gyp ERR! build error / node-gyp rebuild failed

A dependency with native C/C++ code couldn’t compile — missing build tools, Python, or an unsupported Node version.

ERR_OSSL_EVP_UNSUPPORTEDNode.js

Error: error:0308010C:digital envelope routines::unsupported

An old build tool (webpack 4, old react-scripts) uses a hash algorithm that OpenSSL 3 in Node 17+ disables.

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.

[Vue warn]: onMounted is called when there is no active component instanceVue

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

A lifecycle hook was registered outside `setup()` (or after an `await`).

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.