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

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 [email protected]