Cannot set properties of null (setting '__vrv_devtools')

[manchakkay]

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” (nuxt/nuxt#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

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• github-ulrd73-wo2xbj (Open reproduction)

[danielroe]

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

[github-actions]

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:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[manchakkay]

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]

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

[hirasawayuki]

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.