Vue-test-utils: RangeError: Maximum call stack size exceeded at Function.keys (<anonymous>)

[nelsonsar]

Version

1.0.0-beta.24

Reproduction link

https://codesandbox.io/s/oq4n94v9lz

Steps to reproduce

Run the HelloWorld.spec.js

What is expected?

It's expected that the component is mounted.

What is actually happening?

The following error is happening:

RangeError: Maximum call stack size exceeded
        at Function.keys (<anonymous>)

      at mergeData (node_modules/vue/dist/vue.runtime.common.js:1105:21)
      at mergeData (node_modules/vue/dist/vue.runtime.common.js:1113:7)
      at mergeData (node_modules/vue/dist/vue.runtime.common.js:1113:7)
      at mergeData (node_modules/vue/dist/vue.runtime.common.js:1113:7)
      at mergeData (node_modules/vue/dist/vue.runtime.common.js:1113:7)
      at mergeData (node_modules/vue/dist/vue.runtime.common.js:1113:7)
      at mergeData (node_modules/vue/dist/vue.runtime.common.js:1113:7)

---

I was able to track down the change that caused the problem by downgrading until version 1.0.0-beta.22, this specific version includes this chunk of code:

if (vueVersion > 2.2) {
    for (var c in _Vue.options.components) {
      if (!isRequiredComponent(c)) {
        _Vue.component(c, _Vue.extend(_Vue.options.components[c]));
      }
    }
  }

And for some reason it stucks at mergeData trying to resolve ElFormItem's provide directive.

[Prior99]

I'm experiencing a similar problem in combination with vue-i18n.

[Felipesdeveloper]

I'm having the same problem in version 1.0.0-beta.25

[nelsonsar]

I was able to work around the issue by stubbing the component with its own implementation, maybe this helps until a fix arrives.

[eddyerburgh]

As @nelsonsar, until we add a fix, you can workaround this by stubbing the problem component:

const wrapper = mount({
  stubs: {
    ProblemComponent: true
  }
})

[Edza]

I have this error with .beta.21 19, and 26, but it does work with 22!

"@vue/test-utils": "1.0.0-beta.22",

[eddyerburgh]

Can you post a reproduction in a GitHub repo please @Edza ? I want to get this fixed but had trouble reproducing the codesandbox in the vue-test-utils repo

[Edza]

Done.

I created this branch for you:
https://github.com/Edza/Intertyper/tree/vue-test-utils-bug-repro

Simply clone the repo and run: npm i && npm run test:unit

Thanks for the fast reply 😜😜

Will get:
at mergeData (dist\webpack:\node_modules\vue\dist\vue.runtime.esm.js:1135:1)
at mergeData (dist\webpack:\node_modules\vue\dist\vue.runtime.esm.js:1135:1)
at mergeData (dist\webpack:\node_modules\vue\dist\vue.runtime.esm.js:1135:1)
at mergeData (dist\webpack:\node_modules\vue\dist\vue.runtime.esm.js:1135:1)
at mergeData (dist\webpack:\node_modules\vue\dist\vue.runtime.esm.js:1135:1)
at mergeData (dist\webpack:\node_modules\vue\dist\vue.runtime.esm.js:1135:1)
at VueComponent.mergedDataFn (dist\webpack:\node_modules\vue\dist\vue.runtime.esm.js:1163:1)
at getData (dist\webpack:\node_modules\vue\dist\vue.runtime.esm.js:3413:1)
at initData (dist\webpack:\node_modules\vue\dist\vue.runtime.esm.js:3370:1)
at initState (dist\webpack:\node_modules\vue\dist\vue.runtime.esm.js:3307:1)
at VueComponent.Vue._init (dist\webpack:\node_modules\vue\dist\vue.runtime.esm.js:4624:1)
at new VueComponent (dist\webpack:\node_modules\vue\dist\vue.runtime.esm.js:4794:1)
at createComponentInstanceForVnode (dist\webpack:\node_modules\vue\dist\vue.runtime.esm.js:4306:1)
at init (dist\webpack:\node_modules\vue\dist\vue.runtime.esm.js:4127:1)
at createComponent (dist\webpack:\node_modules\vue\dist\vue.runtime.esm.js:5604:1)
at createElm (dist\webpack:\node_modules\vue\dist\vue.runtime.esm.js:5551:1)
at VueComponent.patch [as __patch__] (dist\webpack:\node_modules\vue\dist\vue.runtime.esm.js:6087:1)
at VueComponent.Vue._update (dist\webpack:\node_modules\vue\dist\vue.runtime.esm.js:2656:1)
at VueComponent.updateComponent (dist\webpack:\node_modules\vue\dist\vue.runtime.esm.js:2784:1)
at Watcher.get (dist\webpack:\node_modules\vue\dist\vue.runtime.esm.js:3138:1)
at new Watcher (dist\webpack:\node_modules\vue\dist\vue.runtime.esm.js:3127:1)
at mountComponent (dist\webpack:\node_modules\vue\dist\vue.runtime.esm.js:2791:1)
at VueComponent../node_modules/vue/dist/vue.runtime.esm.js.Vue.$mount (dist\webpack:\node_modules\vue\dist\vue.runtime.esm.js:7995:1)
at mount (dist\webpack:\node_modules\@vue\test-utils\dist\vue-test-utils.js:5645:1)
at shallowMount (dist\webpack:\node_modules\@vue\test-utils\dist\vue-test-utils.js:5690:1)
at Context. (dist\webpack:\tests\unit\Questions.spec.ts:11:21)

[eddyerburgh]

Thanks for the reproduction @Edza.

The issue is because we use Vue.extend internally to add instance properties, stubs, and the localVue constructor.

You can see a simple reproduction here.

I'll look into a solution, but it might take a bit of time.

[Denspaceman]

I encountered the same problem. Has anyone been able to find a solution?

[slavensaka]

Hi, getting the same issue running nuxt on dev mode(hot reload).

[Tinostarn]

Same for me, happens with Nuxt + HMR when I edit store files or refresh the page (no pb when I edit *.vue)
Need each time to kill and reload the server...
Issue started when I upgraded some packages : vee-validate, nuxt-i18n, vuetify for the most important.

[slavensaka]

Seems like the Helper that recursively merges two data objects together causes the problem on nuxt.

[Tinostarn]

Seems like the Helper that recursively merges two data objects together causes the problem on nuxt.

Have you looked into any asyncData() methods that could cause a merge data issue ?

[eddyerburgh]

@slavensaka you should open an issue in Nuxt, since it will (probably) be different to the issue reported here.

[jkosonen]

I'll get this same error with shallowMount if my stubbed component's attribute changes to true. No idea why that leads to Maximum call stack size exceeded. If the component attribute starts with true value, there's no issues toggling it

[MrToxy]

getting the same error. latest vue version and latest nuxt version

[SzNagyMisu]

I experienced this error in the very specific situation of using vue-class-component and referencing this when giving value to a data in the class property style:

// without 'vue-class-component'
// works
export default {
  data () {
    return { myParent: this.$parent } // or anything, referencing `this` is the point
  }
}

// with 'vue-class-component'
import Vue from 'vue'
import Component from 'vue-class-component'

// still works
@Component({
  data () {
    return { myParent: this.$parent }
  }
})
export default class MyComponent extends Vue {}

// breaks with 'RangeError: Maximum call stack size exceeded' at `mergeData`
@Component({ /* ... */ })
export default class MyComponent extends Vue {
  myParent = this.$parent
}

Any of the above code works fine in development, but the third breaks in test.

[slavensaka]

Hi again,
I managed to solve my problem with max call stack, it's more a fix for now explained here
https://github.com/vuetifyjs/vuetify/issues/5633

Replacing in Vue/dist/vue.runtime.common.js
method mergeData with this

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
}

[eddyerburgh]

The original issue is fixed by Vue 2.5.18-beta.0 :)

If anybody experiences the same error in the future, please create a new issue with a minimal reproduction.

[arpit9295]

This seems to still be occurring with ElTable as of [email protected] with [email protected], when you do this following -

Vue.mixin({
  data() {
    return {
      abc: {},
    };
  },
});
if (Vue.options.components.ElTable) {
  Vue.component('ElTable', Vue.options.components.ElTable.extend({}))
}

This was resulting in recursive merge problem where the same objects were being called again and again for merge.