Vue: [Vue 2.0] [Vuex] Cannot create property mergeHook on string 'beforeCreate'

[twixr]

This issue is kinda the same as #4544, but i've got it working now.

When you have (multiple) components in components, and they all use store (vuex) in the following way:

import storeName from 'storeFile'

export default {
  store: storeName,
  methods: {
    // your methods
  }
}

it will result in an error some times (not always) and only in Chrome (on my computer, not on my colleagues computer with same browser, etc), not in Safari. (Mac OS X Yosemite)

Error:

TypeError: Cannot create property 'function mergeHook(
  parentVal,
  childVal
) {
  return childVal
    ? parentVal
      ? parentVal.concat(childVal)
      : Array.isArray(childVal)
        ? childVal
        : [childVal]
    : parentVal
}' on string 'beforeCreate'
    at mergeField (eval at <anonymous> (app.js:606), <anonymous>:1169:18)
    at mergeOptions (eval at <anonymous> (app.js:606), <anonymous>:1160:5)
    at resolveConstructorOptions (eval at <anonymous> (app.js:606), <anonymous>:3329:32)
    at createComponent (eval at <anonymous> (app.js:606), <anonymous>:2391:3)
    at _createElement (eval at <anonymous> (app.js:606), <anonymous>:2864:15)
    at Proxy.render (eval at <anonymous> (app.js:3090), <anonymous>:91:7)
    at VueComponent.Vue._render (eval at <anonymous> (app.js:606), <anonymous>:2954:22)
    at VueComponent.eval (eval at <anonymous> (app.js:606), <anonymous>:2191:21)
    at Watcher.get (eval at <anonymous> (app.js:606), <anonymous>:1656:27)
    at new Watcher (eval at <anonymous> (app.js:606), <anonymous>:1648:12)

I think it is trying to "merge" (mergeHook (?)) the property's (including store) with his parent component.

I'm not 100% sure that this is the issue, but I have changed every store: storeName to the data:

export default {
  data () {
    return {
      'store': storeName
    };
  },

  methods: {
  }
}

And everything works now. But when I change everything back to store: storeName (property on the same level as data, methods, computed, etc.. it will throw the error again.

I hope this is helpfull, and if people have the same issue they should try this to solve it.

[twixr]

@njleonzhang can you try this? To check if it will fix the problem on your app too. :)

[posva]

the store should only be injected at the top of your application, not in every component. I'm curious about why did you think you should do it that way

[posva]

Closing since you shouldn't be using it that way, but I still want to know how you ended up passing the store to all the components 🙂

[twixr]

I import the store in the components where I use it.
I'm now gonna try to combine all our stores (we've got like a store for every component) to one store and import that in main.js (top-level)

I'll let u know, thanks for reply.

[posva]

What you're looking for are modules: https://vuex.vuejs.org/en/modules.html
Create only one store and split it into multiple modules

[renedx]

Thanks for your swift reply and time @posva
We clearly misread something, couldn't find where. Will post IF we find it (prob ever) 😄

[posva]

@renedx We may have forgotten something on the docs. Yes, please, if something was misleading, tell us.
Cheers

[njleonzhang]

@jessereitsma I have not used multi stores as you have.
But my issue is really similar to yours, it occurs on one of my colleagues' computer, not on my computer, only on chrome.

1. Even if he opens the site hosted on my computer, he can still encounter the issue.
2. If I open his site, I can not encounter the issue.
3. His chrome version is same to me.
4. Issue still occur event after he disables all chrome extension.
5. His computer is powerful then mine. (mine is mac book pro 13, his is mac book pro 15)

[twixr]

@njleonzhang how do you create the store instances?
You really should do it with modules (https://vuex.vuejs.org/en/modules.html) as @posva mentioned.

We used to create store instances in every component we use them.
But now we've changed that to one store and one instance (created at top-level and passed to every component) we don't have this problem anymore.

So, thanks @posva our issue is solved now.

[njleonzhang]

@jessereitsma we followed always the document.
I think this should not be the root cause, if it is why your colleagues can not reproduce?
Anyway, you work around the issue, it is great.

[twixr]

I'm not "Working around the issue".. I've changed my structure so it is according to the documentation.
So I solved it, it's not a workaround. :)

[njleonzhang]

@jessereitsma OK, TNX.

[njleonzhang]

@jessereitsma Can you try to build the Vue from the source code, and debug into the source to find the root cause. I am too busy to make this debug recently. The sustainers can not reproduce this issue, so it is hard for them to debug. Currently, only we can reproduce. If you can not, I will debug a few days later.

[twixr]

@njleonzhang Already trying to debug it..
But it's really hard, as it doesn't make any sense.

The error is really vague. So is the 'workaround'

• If I remove the scoped from <style scoped> in a component, it works
• If I remove the mounted in a component, it works.
• If I remove the destroyed in a component, it works.
• If I open another component on the first page and close it and going to the next page, it works.

[njleonzhang]

@jessereitsma @renedx I know it is random, so hard to confirm wether the workaround can really be a workaround. The good news is that the issue does not occur in production environment, and only on Chrome in debug mode. So currently my colleague, who encounters this issue, change to use Firefox instead of Chrome as development browser. (It is a workaround.....)

In addition, this issue may be related to your local dev packages. To keep the consistent of the project dependency everywhere, you can try to leverage yarn

[twixr]

@njleonzhang I've deleted al my local packages and reinstalled them, but that didn't matter.

[njleonzhang]

You can not make sure your local package is consistent to your colleagues with NPM, but yarn can.

[twixr]

It's getting worse while the project is growing.
I can't even use Chrome anymore because every page now always get the mergeHook error.
Not random anymore, just 100% of the calls.

Very, very, very annoying.

[twixr]

The solution for me was the solution from the other issue:
https://github.com/vuejs/vue/issues/4544#issuecomment-274293322

@sircharleswatson:
For what it's worth, I just got this same error but I realized it was because I turned on Experimental Javascript in my Chrome Flags settings. Turning it off solved the issue