devtools: Duplicate Component Trees

So it looks like it’s definitively fixed this time! 😸

@Akryum yup that still works.

WOOHOO! Can’t wait for this to finally be pushed out. Thanks @Akryum

Is this going to be pushed to the Chrome Extension anytime soon?

I have the same issue. As for me, it’s happening when several of my components “import Vue from 'vue'”

same issue for long days

[4.1.4] Same issue here with SSR and vue-material, nearly impossible to use, too much root nodes to be usable. What about this thread?

I’m having the same issue of multiple <Root> and components.

I’ve got the same behaviour, introduced only in 4.1.4. The 4.1.3 devtools showed just a single component (as expected).

Interacting with any one of the component trees in the component view mirrors that action across all duplicated copies. (ie. expanding a collapsed node in copy 1, expands the same node in all other copies at the same time).

@ericcirone Could you try this branch? https://github.com/vuejs/vue-devtools/tree/fix-duplicate-roots

@Akryum So i was messing around with the code and I fixed the issue, at least in my instance. I was looking back at 4.1.3 source since that works fine and was looking at the differences in the scan() function.

So all i changed was not setting instance to be instance.$root

This is the scan function i am using now, and it is working as intended.

function scan () {
  rootInstances.length = 0
  let inFragment = false
  let currentFragment = null
  walk(document, function (node) {
    if (inFragment) {
      if (node === currentFragment._fragmentEnd) {
        inFragment = false
        currentFragment = null
      }
      return true
    }
    const instance = node.__vue__
    if (instance) {
      if (instance._isFragment) {
        inFragment = true
        currentFragment = instance
      }

      // respect Vue.config.devtools option
      let baseVue = instance.constructor
      while (baseVue.super) {
        baseVue = baseVue.super
      }
      if (baseVue.config && baseVue.config.devtools) {
        // give a unique id to root instance so we can
        // 'namespace' its children
        if (typeof instance.__VUE_DEVTOOLS_ROOT_UID__ === 'undefined') {
          instance.__VUE_DEVTOOLS_ROOT_UID__ = ++rootUID
        }
        rootInstances.push(instance)
      }

      return true
    }
  })
  flush()
}

Eeeeeeah man!! Finally!! When the new version will be released?

I am having the same issue. I am using Vue 2.5.16 and the lasted version of the chrome extension.

One other thing to note. Interactions are mirrored, as described by @joelbradbury, however (and it’s an important however) setting a property value in one of the component trees doesn’t necessarily set it in all of the component trees.

That’s a real problem, and it’s bitten me a couple of times already.