Vuetify: [Bug Report] Maximum call stack size exceeded

[jrvaja]

Versions and Environment

Vuetify: 1.3.0
Vue: 2.5.17
Browsers: Chrome 69.0.3497.100
OS: Mac OS 10.13.6

Steps to reproduce

• Click on UI Components -> Inputs & Controls -> forms
• Click on any other nav-drawer like (UI Components -> Inputs & Controls -> selects)

Now everything is stucked. We need to refresh the page.

https://www.dropbox.com/s/7gmowlc6lcb780i/Screenshot%202018-10-18%2016.15.09.png?dl=0

Expected Behavior

Fix the solution

Actual Behavior

I was working with 1.2.2

Reproduction Link

You need to follow the steps, it could not display by any reproduction link.

Other comments

Request for fix

[KaelWD]

Caused by v-window-group (tabs), possibly mixed with vee-validate as it only happens when navigating from the forms page

Trying to merge provide on v-tabs-items:

[jrvaja]

Hey @KaelWD

In which version can I expect this fix?

[KaelWD]

Unless we somehow fix it accidentally in vuetify, that's a question for Evan You. He's merged a bunch of PRs recently so probably soon.

[jrvaja]

@KaelWD Thanks for quick response. Much appreciated!

[jrvaja]

Hey @KaelWD

Still the new doc for 1.3.4 has the same issue.
Can you please share me link for that commit or PR or merge the updates?

I am exited to see this updates.

Regards,

[KaelWD]

https://github.com/vuejs/vue/issues/8967

[QuanticPotatoes]

Hey,
I had the same issue on my project, it's very annoying. I change the mergeData function on the runtime.common.js to :
edit: I replace with the PR on vuejs/vue#8967 thx @KaelWD 😄.

function mergeData (to, from)  {
  if (!from) return to
  let key, toVal, fromVal
  const keys = Object.keys(from)
  for (let i = 0; i < keys.length; i++) {
    key = keys[i]
    toVal = to[key]
    fromVal = from[key]
    if (!hasOwn(to, key)) {
      set(to, key, fromVal)
    } else if (
      toVal !== fromVal &&
      isPlainObject(toVal) &&
      isPlainObject(fromVal)
    ) {
      mergeData(toVal, fromVal)
    }
  }
  return to
}

and it's work for now. Hope an official update appear quickly 👍

Regards,

[corentin-allemand]

Hi @QuanticPotatoes,
I have also this issue. I tried to replace the mergeData function with the code of the merge request but the problem persist.

It seems to come from v-tabs item. See the following screenshot:

Hope for an update too 😄

[Tinostarn]

Hi,
Just came upon this topic, googling "Maximum call stack size exceeded", which is happening on my Nuxt project.
After trying to isolate the problem, it seems to come from the v-tabs component, or more exactly from the v-tab-items and v-tab-item component.

In my component, I used the sample code from the example on the official doc

<v-dialog fullscreen transition="dialog-bottom-transition" v-model="$store.state.showDialog">
  <v-toolbar color="cyan" dark tabs>
      <v-toolbar-side-icon></v-toolbar-side-icon>
      <v-toolbar-title>Page title</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>close</v-icon>
      </v-btn>
      <v-tabs
        slot="extension"
        v-model="activeSection"
        centered
        color="cyan"
        slider-color="yellow"
      >
        <v-tab
          v-for="i in 3"
          :key="i"
          :href="`#tab-${i}`"
        >
          Item {{ i }}
        </v-tab>
      </v-tabs>
    </v-toolbar>
    <v-tabs-items v-model="activeSection">
      <v-tab-item
        v-for="i in 3"
        :id="`tab-${i}`"
        :key="i"
      >
        <v-card flat>
          <v-card-text>Just met</v-card-text>
        </v-card>
      </v-tab-item>
    </v-tabs-items>
</v-dialog>

Got this error each time I refresh the windows, or with HMR when I edit store files but not when I edit .vue file (page or component)

RangeError: Maximum call stack size exceeded
    at mergeData (C:\Sources\project\node_modules\vue\dist\vue.runtime.common.js:1126:20)

If I remove v-tabs-items (or v-tab-item) from the template, it works.
Can this issue be related to vuejs/vue#8967 ?

[KaelWD]

:man_facepalming:
this issue is literally why I made that PR

[Tinostarn]

Thanks @KaelWD
I replaced the mergeData() function with the one in PR, but like @DrCoc it doesn't fix the issue :(

[corentin-allemand]

@supertino7
Did you replace it in Vue/dist/vue.runtime.common.js?

[Tinostarn]

@supertino7
Did you replace it in Vue/dist/vue.runtime.common.js?

No, only in vue-server-renderer/build.js.
I tried in vue.runtime.common.js and now it seems to fix the issue
Thanks for your suggestion 👍

[jrvaja]

Hey @KaelWD

Eagerly awaiting the fix for this issue.
Just gentle question, when do you plan for this?

Regards,

[jacekkarczmarczyk]

Should be already fixed in vue 2.5.18-beta.0

[jrvaja]

Hey @jacekkarczmarczyk ,

Could you please share vuetify 2.5.18-beta.0 document repo and production repo link?

Regards,