Vue-devtools: Duplicate Component Trees

[monooso]

Version

4.1.4

Browser and OS info

Chrome 65.0.3325.146 / macOS 10.13.3

Steps to reproduce

Open the vue-devtools extension, and navigate to the "Components" tab. You should see several identical Components trees (three, in my experience). For example:

<Root>
  <MyApp>
<Root>
  <MyApp>
<Root>
  <MyApp>

What is expected?

vue-devtools should display a single Component tree, as per previous version of the extension.

What is actually happening?

vue-devtools displays several duplicate Component trees.

---

This bug also appears on Chrome 64.x, and Firefox 58.x. It appears to have been introduced in vue-devtools version 4.1.4.

[aguingand]

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

[joelbradbury]

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).

[monooso]

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.

[mirari]

I've got the same behaviour.

But my old project seems well.
I tried to copy package.json, yarn.lock, and all webpack configs, but still got the bug.

[ericcirone]

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

[badpunman]

Same issues.

Also experiencing instability in some scenarios when trying to use the component name search. It just freezes the whole vue-devtools and requires a restart of the whole browser. Might be unrelated issue though, and worth separate item?

[rawbin-]

same issue

[caseyprovost]

Im seeing this issue too

[vintotsai]

Same here.vue-devtools version at 4.1.4.
Everything seemed fine until I pressed the refresh btn,then I got Duplicate Component Trees.

[adriancast]

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

[AliArdaOrhan]

Having the same issue with Vue 2.5.2

[majorcool]

What's going on for this issue?

[adriancast]

I am still having the same issue :(

[netstuff]

metoo :)

[JH46666]

Still exist

[justinkames]

Having the same issue!

[KristofferBerg]

Same issue here.

[ericcirone]

Any update on timeline for fixing this?

[diazemiliano-zz]

Mee too.

[caryxiao]

Mee too....
I almost thought there was a problem with my code, but too many people had the same problem. It didn't seem to be my code.

[c1nema]

Any update on this? Is there a fix available yet just waiting to be merged or something?
Edit: Oh my bad, didn't saw that @ericcirone was already asking for this

[c1nema]

Because of this issue, I was using the Electron based DevTools for a while now. I opened the DevTools within Chrome for the first time again and the bug went away?! I dont get it

( I got 2 seperate Vue instances so this is correct )

[adnanshussain]

Same issue but it not happening with all Vue apps I make, only some of them :|

[oliver-ni]

Same issue here. Happened after I added a md-menu from vue-material.

[jsantoru]

same issue here. i am also using vue-material

[whuper]

I am using vue-material,and I got same issue too...

[mswaidan]

This also happens when I use vue-material

[rachardking]

me too

[Deg5112]

hey all, I've just re-installed the vue devtools extension, and the problem with duplicate component trees went away. Can we confirm this is the correct fix, does this work for anyone else?

[lusess123]

v4.1.5 solve?

[Linzdigr]

[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?

[cycold]

Me too!

[ArStah]

Same here, different amount of roots on different pages

[Cookizza]

I've got this also, I only import Vue in one location.

Sometimes it's fine, but usually there's 3 instances of the root.

[majorcool]

I have faced this issue since months ago, and today I found the reason is that I used event bus in the router:

router.afterEach(function(to, from) {
  eventBus.$emit("route-changed", to);
});

After I remove the above code and refract it in the component by watch $route, the duplicated roots and apps just go away.

[Linzdigr]

On my side I use router.beforeResolve to call asyncData hook declared in navigable components for Server Side Rendering (as in https://ssr.vuejs.org/guide/data.html#client-data-fetching). The number of duplicated root elements depends on route component called.
Any idea on what's going on?

[sunchenguang]

same issue for long days

[b4dnewz]

hi, @majorcool how did you find out that was the cause (for your case)? I'm curious to understand what cause this duplication problem

[DavidLambauer]

same here :( Any Updates?

[Mmzer]

Me too!

[ericcirone]

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

[ArStah]

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

[Akryum]

Could someone try the master branch to see if the issue is resolved for you?

[ericcirone]

@Akryum I cloned, npm install, npm run build. Load unpacked from shells/chrome. The problem is still there.

[Akryum]

@ericcirone Do you have a reproduction repository for me to check?

[ericcirone]

@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()
}

[ericcirone]

@Akryum I do not have anything public that you could use to reproduce the issue. It's all private code. Sorry

[Akryum]

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

[ericcirone]

@Akryum yup give me a sec

[ericcirone]

@Akryum yup that still works.

[Akryum]

If you refresh you don't loose <Root>?

[ericcirone]

@Akryum I just refreshed a bunch (both browser refresh and vue-devtools refresh button) All looks fine.

[Akryum]

So it looks like it's definitively fixed this time! :smile_cat:

[justin1364]

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

[sqal]

I am still having this problem in 5.0.0 beta 1 :( this happens only when I filter components tree, otherwise it's fine

[powext]

The problem persists in 4.1.5 beta :(