question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:19 (4 by maintainers)

github_iconTop GitHub Comments

3reactions
posvacommented, Dec 23, 2016

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

0reactions
twixrcommented, Jan 27, 2017

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

vue.js - Cannot create property 'inject' on string 'reactiveData'
After updating to vue 2.5.8 I've started getting this error: Cannot create property 'inject' on string 'reactiveData'.
Read more >
typeerror: cannot set properties of undefined created() vue
I am using Quasar, vue and vuex. I have created a layout and would like to use jest to unit test. I have...
Read more >
Options: Lifecycle | Vue.js
When this hooks is called, the following have been set up: reactive data, computed properties, methods, and watchers. However, the mounting phase has...
Read more >
Getting Started with Storing Vue Data in Vuex - Fjolt
To start with, we'll make one central Vuex store. Within our Vue project, we have a file called src/main.js . Let's add our...
Read more >
Vue: Using localStorage with Vuex store - Mike Street
Using the browser's localStorage we can create a Vue app which has its Vuex store cached. This allows the user to navigate away...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found