devtools icon indicating copy to clipboard operation
devtools copied to clipboard
verified publisher icon nuxt

Cannot set properties of null (setting '__vrv_devtools')

Open manchakkay opened this issue 1 year ago • 8 comments

Environment

  • Operating System: Linux
  • Node Version: v21.7.3
  • Nuxt Version: 3.11.2
  • CLI Version: 3.11.1
  • Nitro Version: 2.9.6
  • Package Manager: pnpm@
  • Builder: -
  • User Config: modules, app, auth, devServer, server, ssr, runtimeConfig, css, vite
  • Runtime Modules: @sidebase/[email protected]
  • Build Modules: -

Reproduction

StackBlitz fork with important files

I can't share the entire project, but I'll be happy to send individual files of interest if it helps solve the problem

Describe the bug

After importing the vue-multiselect library, an error began to occur on every page of the site, this has happened dozens of times before, but the problem magically disappeared or was replaced by another more serious one (see Additional Context)

It looks like a problem with DevTools, but none of the attempts to disable it in development mode have been successful, both in terms of disabling DevTools and in terms of fixing the error.

Additional context

The problem only appears in the browser window, I tried to localize the individual file causing the problem. I can point out that the problem is not related to the /server and /pages directories and is most likely either in the dependencies or in the nuxt.config.ts configuration.

In addition to this, I also previously encountered the “isCE” (https://github.com/nuxt/nuxt/issues/13117) problem, which was solved through “optimizeDeps”

Actions like clearing the cache, regenerating or reinstalling previously did not help

Logs

500
Cannot set properties of null (setting '__vrv_devtools')

at https://<DOMAIN>/_nuxt/node_modules/.cache/vite/client/deps/vue-router.js?v=47f21660:1813:35
at Array.forEach ()
at Proxy. (https://<DOMAIN>/_nuxt/node_modules/.cache/vite/client/deps/vue-router.js?v=47f21660:1812:27)
at renderComponentRoot (https://<DOMAIN>/_nuxt/node_modules/.cache/vite/client/deps/chunk-BVUZKNJ3.js?v=1161d169:2350:17)
at ReactiveEffect.componentUpdateFn [as fn] (https://<DOMAIN>/_nuxt/node_modules/.cache/vite/client/deps/chunk-BVUZKNJ3.js?v=1161d169:7466:46)
at ReactiveEffect.run (https://<DOMAIN>/_nuxt/node_modules/.cache/vite/client/deps/chunk-BVUZKNJ3.js?v=1161d169:435:19)
at instance.update (https://<DOMAIN>/_nuxt/node_modules/.cache/vite/client/deps/chunk-BVUZKNJ3.js?v=1161d169:7597:17)
at setupRenderEffect (https://<DOMAIN>/_nuxt/node_modules/.cache/vite/client/deps/chunk-BVUZKNJ3.js?v=1161d169:7607:5)
at mountComponent (https://<DOMAIN>/_nuxt/node_modules/.cache/vite/client/deps/chunk-BVUZKNJ3.js?v=1161d169:7375:7)
at processComponent (https://<DOMAIN>/_nuxt/node_modules/.cache/vite/client/deps/chunk-BVUZKNJ3.js?v=1161d169:7329:9)

browser.mjs:44  error [nuxt] error caught during app initialization TypeError: Cannot set properties of null (setting '__vrv_devtools')
    at vue-router.mjs:2466:30
    at Array.forEach (<anonymous>)
    at Proxy.<anonymous> (vue-router.mjs:2464:35)
    at renderComponentRoot (runtime-core.esm-bundler.js:887:16)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:6020:46)
    at ReactiveEffect.run (reactivity.esm-bundler.js:177:19)
    at instance.update (runtime-core.esm-bundler.js:6151:16)
    at setupRenderEffect (runtime-core.esm-bundler.js:6161:5)
    at mountComponent (runtime-core.esm-bundler.js:5929:7)
    at processComponent (runtime-core.esm-bundler.js:5883:9)
log @ browser.mjs:44
_log @ core.mjs:381
resolveLog @ core.mjs:349
_logFn @ core.mjs:377
(anonymous) @ core.mjs:306
(anonymous) @ nuxt.js:98
(anonymous) @ index.mjs:48
(anonymous) @ index.mjs:48
app:error (async)
serialTaskCaller @ index.mjs:46
callHookWith @ index.mjs:198
callHook @ index.mjs:187
handleVueError @ entry.js:6
callWithErrorHandling @ runtime-core.esm-bundler.js:195
handleError @ runtime-core.esm-bundler.js:242
renderComponentRoot @ runtime-core.esm-bundler.js:923
componentUpdateFn @ runtime-core.esm-bundler.js:6020
run @ reactivity.esm-bundler.js:177
instance.update @ runtime-core.esm-bundler.js:6151
setupRenderEffect @ runtime-core.esm-bundler.js:6161
mountComponent @ runtime-core.esm-bundler.js:5929
processComponent @ runtime-core.esm-bundler.js:5883
patch @ runtime-core.esm-bundler.js:5351
componentUpdateFn @ runtime-core.esm-bundler.js:6027
run @ reactivity.esm-bundler.js:177
instance.update @ runtime-core.esm-bundler.js:6151
setupRenderEffect @ runtime-core.esm-bundler.js:6161
mountComponent @ runtime-core.esm-bundler.js:5929
processComponent @ runtime-core.esm-bundler.js:5883
patch @ runtime-core.esm-bundler.js:5351
mountChildren @ runtime-core.esm-bundler.js:5599
mountElement @ runtime-core.esm-bundler.js:5506
processElement @ runtime-core.esm-bundler.js:5471
patch @ runtime-core.esm-bundler.js:5339
componentUpdateFn @ runtime-core.esm-bundler.js:6027
run @ reactivity.esm-bundler.js:177
instance.update @ runtime-core.esm-bundler.js:6151
setupRenderEffect @ runtime-core.esm-bundler.js:6161
mountComponent @ runtime-core.esm-bundler.js:5929
processComponent @ runtime-core.esm-bundler.js:5883
patch @ runtime-core.esm-bundler.js:5351
mountSuspense @ runtime-core.esm-bundler.js:1260
process @ runtime-core.esm-bundler.js:1200
patch @ runtime-core.esm-bundler.js:5376
componentUpdateFn @ runtime-core.esm-bundler.js:6027
run @ reactivity.esm-bundler.js:177
instance.update @ runtime-core.esm-bundler.js:6151
setupRenderEffect @ runtime-core.esm-bundler.js:6161
mountComponent @ runtime-core.esm-bundler.js:5929
processComponent @ runtime-core.esm-bundler.js:5883
patch @ runtime-core.esm-bundler.js:5351
render2 @ runtime-core.esm-bundler.js:6672
mount @ runtime-core.esm-bundler.js:3938
app.mount @ runtime-dom.esm-bundler.js:1535
initApp @ entry.js:8
await in initApp (async)
(anonymous) @ entry.js:10

manchakkay avatar May 18 '24 14:05 manchakkay

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

bolt-new-by-stackblitz[bot] avatar May 18 '24 14:05 bolt-new-by-stackblitz[bot]

The reproduction doesn't run because of missing files. Would you be able to make it more minimal and ensure it reproduces the issue? 🙏

danielroe avatar May 18 '24 14:05 danielroe

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritize it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a couple of templates for starting with a minimal reproduction:

👉 https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz 👉 https://codesandbox.io/s/github/nuxt/starter/v3-codesandbox

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

github-actions[bot] avatar May 18 '24 14:05 github-actions[bot]

Here is another attempt to reproduce the error, but as I see outside the server everything starts successfully https://stackblitz.com/~/github.com/manchakkay/nuxt-rh64j235l

Therefore, it turns out to rely only on the error log, however, I understand very little from it and have difficulty understanding the relationship with one of the my files

manchakkay avatar May 18 '24 15:05 manchakkay

So, a little clarification:

There was a small error in the vue file of the page, but it was only possible to view it in preview mode

The original error is as expected: 500 Cannot read properties of undefined (reading 'sort')

In dev mode, any error is replaced with: 500 Cannot set properties of null (setting '__vrv_devtools')

If the error occurs without restarting the server (in dev mode), it will be shown in the required format, but if the error is not fixed, then after restarting the server (as it was after installing the package), this screen will pop up

manchakkay avatar May 18 '24 15:05 manchakkay

I encountered the same issue in my environment. The error occurs on the initial startup after deleting the node_modules/.cache/vite directory. However, the error does not occur when restarting the application.

Update: I was able to reproduce the issue by specifically deleting the node_modules/.cache/vite/client/deps/_metadata.json file.

hirasawayuki avatar Sep 17 '24 12:09 hirasawayuki

Ran into this exactly issue. Indeed, deleting all files under node_modules/.vite helped.

WillAvudim avatar Aug 31 '25 20:08 WillAvudim

I had the same error. Maybe the cause was a sub-dependency linked to a library. I removed the ^ from my package.json, and that worked for me. This happened specifically when I installed @nuxt/icon version 2.0.0. It doesn’t work with "nuxt": "4.1.3", because when I called the <Icon /> component, it showed the error "Maximum call stack".

tropikow avatar Oct 12 '25 21:10 tropikow