Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_20__.reactive) is not a function - in Vue 2

Question

I'm a newbie in Vue js,

Error in Console:

Error

Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_20__.reactive) is not a function - in Vue 2
    at resetStoreState (webpack-internal:///./node_modules/vuex/dist/vuex.esm-bundler.js:221:64)
    at new Store (webpack-internal:///./node_modules/vuex/dist/vuex.esm-bundler.js:1031:3)
    at eval (webpack-internal:///./src/store/index.js:7:13)
    at Module../src/store/index.js (app.js:186:1)
    at __webpack_require__ (app.js:268:33)
    at fn (app.js:513:21)
    at eval (webpack-internal:///./src/main.js:12:70)
    at Module../src/main.js (app.js:175:1)
    at __webpack_require__ (app.js:268:33)
    at app.js:1385:109

I have Attached the image here: https://postimg.cc/FfVC6dmw

=> I installed Vuex and created one folder inside the src folder and in that created index.js file wrote code as below :

    import Vue from "vue";
    import Vuex from 'vuex';
    
    Vue.use(Vuex);
    
    const store = new Vuex.Store({
        state:{
            message:"Hello, From Vuex"
        },
        mutations:{},
        actions:{},
        getters:{}
    
    })
    
    export default store;

=> Main.js

    import Vue from 'vue'
    import App from './App.vue'
    import StoreC from './store/index'
    
    Vue.config.productionTip = false
    
    new Vue({
        StoreC,
        render: h => h(App),
    }).$mount('#app')

I have attached package.json below.

    {
      "name": "vuex-shop",
      "version": "0.1.0",
      "private": true,
      "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
      },
      "dependencies": {
        "core-js": "^3.8.3",
        "vue": "^2.6.14",
        "vuex": "^4.0.2"
      },
      "devDependencies": {
        "@babel/core": "^7.12.16",
        "@babel/eslint-parser": "^7.12.16",
        "@vue/cli-plugin-babel": "~5.0.0",
        "@vue/cli-plugin-eslint": "~5.0.0",
        "@vue/cli-service": "~5.0.0",
        "eslint": "^7.32.0",
        "eslint-plugin-vue": "^8.0.3",
        "install-peers": "^1.0.3",
        "vue-template-compiler": "^2.6.14"
      },
      "eslintConfig": {
        "root": true,
        "env": {
          "node": true
        },
        "extends": [
          "plugin:vue/essential",
          "eslint:recommended"
        ],
        "parserOptions": {
          "parser": "@babel/eslint-parser"
        },
        "rules": {}
      },
      "browserslist": [
        "> 1%",
        "last 2 versions",
        "not dead"
      ]
    }

Answer 1

1. Check Vuex Version: Ensure that you are using the correct version of Vuex for your Vue.js version. Vuex 4.x is designed for Vue 3, while Vuex 3.x is for Vue 2. If you're using Vue 2, make sure you have Vuex 3.x installed.

   npm install vuex@3

2. if you still have this problem : vuex.esm-bundler.js is still missing in the dist folder , i think sometimes Clearing Node Modules and Reinstall helps

good luck

Answer 2

Your version of Vue is not compatible with your version of Vuex.

Vuex 3 works with Vue 2: https://v3.vuex.vuejs.org/

Vuex 4 works with Vue 3: https://vuex.vuejs.org/

You specifically need: npm install vuex@3.6.2