fix: Vue devtools crashing (unusable) with v1.1.4

[Neil Richter]

🐛 The bug

When using the Nuxt devtools with version 1.1.4 we cannot use the Vue devtools along. See logs below.

I digged a bit, and the code throwing the error seems to belong to @vue/devtools-api, but in version 6. This code is referenced nowhere in the version 7 of the Vue devtools

This leads me to think there is a mismatch in the version of the devtools, and that causes the crash.

In the dependencies, two packages rely on this dependency:

• vue-router@4.3.0
• pinia@2.1.7

I believe it is pinia causing it, as it is still working with @nuxt/devtoools@1.0.8, and not since 1.1.4 (or maybe a few patches earlier)

🛠️ To reproduce

Stackblitz Nuxt's starter template, with devtools enabled

https://stackblitz.com/edit/nuxt-starter-dszg2e?file=package-lock.json,nuxt.config.ts

🌈 Expected behavior

Vue devtools should work along Nuxt devtools

ℹ️ Additional context

• Operating System: Darwin
• Node Version: v20.11.0
• Nuxt Version: 3.11.1
• CLI Version: 3.11.1
• Nitro Version: 2.9.5
• Package Manager: pnpm@8.10.2
• Builder: -
• User Config: ssr, colorMode, devtools, modules, experimental, eslint
• Runtime Modules: @nuxt/ui@2.15.0, @vueuse/nuxt@10.9.0, @pinia/nuxt@0.5.1, @nuxt/eslint@0.3.0-beta.4
• Build Modules: -
• Vue devtools (extension) version: 6.5.1
• Nuxt devtools: 1.1.4

[vite] connecting... client.ts:19:8
[vite] connected. client.ts:173:14
info <Suspense> is an experimental feature and its API will likely change. browser.mjs:44:19
✨ Nuxt DevTools  Press Shift + Option + D to open DevTools <empty string> devtools.client.mjs:49:13
An error occurred in hook 'getComponentRootElements' with payload: 
Object { componentInstance: {…}, rootElements: [] }
backend.js:748:19
TypeError: can't access property "types", appRecord.options is undefined
    isFragment moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:6858
    getRootElementsFromComponentInstance moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:6356
    setup moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:7026
    callHandlers moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:746
    callHook moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:227
    getComponentRootElements moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:367
    createAppRecord moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:1036
    registerAppJob moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:1016
    registerApp moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:992
    run moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:3786
    fn moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:3795
    onDone moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:3778
    promise callback*run moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:3786
    queue moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:3798
    queue moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:3772
    registerApp moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:992
    initBackend moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:1966
    emit eval:1
    _replayBuffer eval:1
    on eval:1
    initBackend moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:1965
    handshake moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:14557
    EventListener.handleEvent* moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:14512
    <anonymous> moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:14562
    <anonymous> moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:14564
backend.js:749:19
Job regiserApp failed: backend.js:3787:19
TypeError: can't access property "ownerDocument", el is undefined
    createAppRecord moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:1046
    registerAppJob moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:1016
    registerApp moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:992
    run moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:3786
    fn moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:3795
    onDone moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:3778
    promise callback*run moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:3786
    queue moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:3798
    queue moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:3772
    registerApp moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:992
    initBackend moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:1966
    emit eval:1
    _replayBuffer eval:1
    on eval:1
    initBackend moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:1965
    handshake moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:14557
    EventListener.handleEvent* moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:14512
    <anonymous> moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:14562
    <anonymous> moz-extension://ca6046e5-16cc-40f1-b45d-7dd005f78ff3/build/backend.js:14564
backend.js:3788:19
 

[AmirMechouk]

Plus one on this. Let me know if any additional info is needed. More than happy to help.

[AmirMechouk]

Thanks for the quick fix, much appreciated