Vuex: Problem when using dynamic property names in mutations (vuex 2.0 & with vue-cli)

[gaoupon]

const SET_ARTICLES = 'SET_ARTICLES'
const SET_DATE = 'SET_DATE'

const mutations = {
    [SET_ARTICLES] (state, date, articles) {
        state.days.push({
            date: date,
            articles: articles
        })
    },
    [SET_DATE] (state, value) {
        state.date = value
    }
}

Error like this:

ERROR in ./src/store/index.js
Module not found: Error: Cannot resolve module 'babel-runtime/helpers/defineProperty' in ...src\store
resolve module babel-runtime/helpers/defineProperty in ...src\store

[LinusBorg]

Hi

Thanks for filing this issue! Could you please provide a small reporduction repository so we can debug this without trying to replicate this ourselves?`

That would be very helpful, thanks!

It seems that this is rather related to babel than vuex. did you change anything after installing the template?

[gaoupon]

I did'nt change anything, and when I change the code like this:

const mutations = {
    SET_ARTICLES (state, date, articles) {
        state.days.push({
            date: date,
            articles: articles
        })
    },
    SET_DATE (state, value) {
        state.date = value
    }
}

The application can run without any error. So I think it may have something to do with babel built in vue-cli.

[LinusBorg]

Repeating my request: Could you please provide a small reporduction repository so we can debug this without trying to replicate this ourselves?`

[LinusBorg]

Closing for inactivity. We can re-open if a reproduction is provided.

[terrarum]

@LinusBorg Hi, I've run into this same issue. Here's a demo project created from a run of vue init webpack: https://github.com/terrarum/vue-computed-property-issue

I've added a computed property to the new Vue call in /src/main.js and I'm getting the same error as @gaoupon:

ERROR in ./src/main.js
Module not found: Error: Cannot resolve module 'babel-runtime/helpers/defineProperty' in /Users/fidlejw7/Development/localhost/defineProperty-issue/src
 @ ./src/main.js 3:23-70

I ran into this issue while replicating the Shopping Cart example here https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart in my own project.

I just actually npm run dev'd vuex-dev package and the Shopping Cart example is running perfectly.

Comparing the package.json file from vuex-dev and both of my projects generated by the vue cli tool, vuex-dev is specifying very specific versions of each Babel project, whereas my generated projects are all set to get whatever the latest version is. Looks like this is definitely an issue with a later version of Babel.

Edit: I used vue init webpack not vue init webpack-simple.

[terrarum]

I don't understand computers. I tried adding babel-polyfill to my project to see if that would fix it and it did. To be sure that that was the solution I removed babel-polyfill from package.json and ran rm -rf node_modules && npm cache clean && npm install. I ran npm run dev again and the problem has not come back, despite, as far as I can tell, nothing else changing other than me adding and removing babel-polyfill.

[LinusBorg]

Just tested your repo locally, works for me.

So it seems it has nothing to do with the template, issue stays closed. Thanks for the attempted repro anyway, appreciated!

[terrarum]

Bizarre. Thanks for looking, glad to help!

[Jordy-A]

@terrarum Really strange, I did the same: install and uninstall babel-polyfill and it fixed the same issue for me.

[terrarum]

@Jordy-A Weeeird. Maybe it has a dependency that gets installed and that fixes it somehow?

[Jordy-A]

I have to correct my previous comment. It is not working after uninstalling babel-polyfill. So I reinstalled it again and it is working now with babel-polyfill registered.