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"
      ]
    }

Felipe · Accepted Answer · 2022-04-09 21:52:52Z

5

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]

answered Apr 9, 2022 at 21:52

Felipe

512 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user20476491 Over a year ago

still not working, vuex.esm-bundler.js is still missing in the dist folder

ABIX · Accepted Answer · 2023-09-07 01:55:28Z

0

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
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

answered Sep 7, 2023 at 1:55

ABIX

1

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related