Node 6.10 > Error "must call Vue.use(Vuex) before creating a store instance" without any reason …

[Shudrum]

Hello everyone!

I just cloned my project on a fresh machine install with the latest 6.10 version of Node.js. Everything works fine during the webpack build but my app just didn't works anymore…

I look at the console and OH! The noob error: [vuex] must call Vue.use(Vuex) before creating a store instance.…

Be sure I know how to use Vuex as my project works perfectly from months.

I'll try to find out why, I really need to update my project, I hope I'll find out how.

Here is my main js file FYI:

const theme = require('../themes/default');
const Vue = require('vue');
const Vuex = require('vuex');
const Nes = require('nes');
const app = require('./components/app');

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    // …
  },
  mutations: {
    // …
  },
});

const vm = new Vue({
  store,
  el: '#app',
  template: '<app/>',
  components: { app },
});

Thank you!

[fnlctrl]

Vue has just switched to es modules for the default package entry. So instead of

const Vue = require('vue');
const Vuex = require('vuex');

use import instead

import Vue from 'vue';
import Vuex from 'vuex';

---

If your module bundler can't handle import, use

const Vue = require('vue').default;
const Vuex = require('vuex').default;

[Shudrum]

How … missed that ><

Thank you very much, I thinked about migrate to import so … this is the time.

[Khachatour]

Hey there I do have same problem, and tried all the ways, and nothing helps!! @Shudrum @fnlctrl guys ? any help ?

[olivbau]

Same problem as @Khachatour

main.js

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App'
import router from './router'

Vue.use(Vuex)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

EDIT : Solved

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App'
import router from './router'

Vue.use(Vuex)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  store: require('./components/store/DatasStore.js'),
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

[adamzerner]

See https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart for how they do it in their sample app.

app.js

import 'babel-polyfill'
import Vue from 'vue'
import App from './components/App.vue'
import store from './store'
import { currency } from './currency'

Vue.filter('currency', currency)

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import cart from './modules/cart'
import products from './modules/products'
import createLogger from '../../../src/plugins/logger'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
  actions,
  getters,
  modules: {
    cart,
    products
  },
  strict: debug,
  plugins: debug ? [createLogger()] : []
})