devtools icon indicating copy to clipboard operation
devtools copied to clipboard

fix: > v1.6.0 component tree not connecting on Firefox

Open silvio-e opened this issue 1 year ago â€ĸ 11 comments

🐛 The bug

The component tree wouldn't load in Firefox for devtools above 1.6.0. This happens in all of my projects. On Stackblitz this happens also when when I'm opening the preview in a new tab but not in the default preview pane.

đŸ› ī¸ To reproduce

https://stackblitz.com/edit/nuxt-starter-zdqhmz?file=nuxt.config.ts

🌈 Expected behavior

Expecting that it loads the component tree like in version 1.6.0

â„šī¸ Additional context

No response

silvio-e avatar Dec 03 '24 20:12 silvio-e

/cc @webfansplz do you have any idea on this?

antfu avatar Dec 05 '24 02:12 antfu

Hi @silvio-e, I can't reproduce the issue, can you provide more info?

Image

webfansplz avatar Dec 05 '24 02:12 webfansplz

I'm experiencing the same issue, and Pinia also remains stuck on the connecting screen. Image

FxOmar avatar Dec 06 '24 13:12 FxOmar

I can't even get to show the devtools on local whether true or false devtools: { enabled: true },

jamols09 avatar Dec 06 '24 14:12 jamols09

I'm experiencing the same issue, and Pinia also remains stuck on the connecting screen. Image

Other features is working as expected? Can you provide a mini repo? Thanks.

webfansplz avatar Dec 07 '24 08:12 webfansplz

Same problems here, component tree and pinia page are connecting forever. Here is my repo to reproduce it: https://github.com/yjlin0224/nuxt-app


Update: I resolved after I disabled "Vue.js devtools" addon in my browser, both Firefox and Chrome work fine now. Thanks https://github.com/nuxt/devtools/issues/690#issuecomment-2520682450

yjlin0224 avatar Jan 05 '25 18:01 yjlin0224

Same here, like for @yjlin0224 disabling Vue devtools resolved the problem for Nuxt Devtools.

But I guess it shouldn't happen?

silvio-e avatar Jan 09 '25 10:01 silvio-e

same here, just like suggested, disabling vue devtool extension in Chrome solved the issue

roseyda avatar Jan 09 '25 14:01 roseyda

I'm experiencing this issue with an additional detail that might help debugging:

It gets stuck in http://localhost:3000/_nuxt/node_modules/@vue/devtools-kit/dist/index.js?v=174d22ef

on this line:

parse(string) {
  return this.deserialize(JSON.parse(string));
}

in this function:

  const { json, meta } = payload;
  let result = copy(json);
  if (meta == null ? void 0 : meta.values) {
    result = applyValueAnnotations(result, meta.values, this);
  }
  if (meta == null ? void 0 : meta.referentialEqualities) {
    result = applyReferentialEqualityAnnotations(result, meta.referentialEqualities);
  }
  return result;
}
stringify(object) {
  return JSON.stringify(this.serialize(object));
}
parse(string) {
  return this.deserialize(JSON.parse(string));
}

Environment:

Note: The related? issue with extraneous non-props attributes (#745) appeared at the same time but was resolved after upgrading Nuxt/Nitro/package manager.

bjorne84 avatar Jan 19 '25 08:01 bjorne84

Bump too on this

Mikaleb avatar Jan 19 '25 23:01 Mikaleb

Still an issue as of August 1st 2025

lrockreal avatar Aug 01 '25 16:08 lrockreal