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

admin管理员组

文章数量:1332873

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:

=> 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-piler": "^2.6.14"
      },
      "eslintConfig": {
        "root": true,
        "env": {
          "node": true
        },
        "extends": [
          "plugin:vue/essential",
          "eslint:remended"
        ],
        "parserOptions": {
          "parser": "@babel/eslint-parser"
        },
        "rules": {}
      },
      "browserslist": [
        "> 1%",
        "last 2 versions",
        "not dead"
      ]
    }

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/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-piler": "^2.6.14"
      },
      "eslintConfig": {
        "root": true,
        "env": {
          "node": true
        },
        "extends": [
          "plugin:vue/essential",
          "eslint:remended"
        ],
        "parserOptions": {
          "parser": "@babel/eslint-parser"
        },
        "rules": {}
      },
      "browserslist": [
        "> 1%",
        "last 2 versions",
        "not dead"
      ]
    }

• javascript
• vue.js
• vuejs2
• vuex

Share Improve this question Follow asked Mar 29, 2022 at 5:26 MahenMahen 40911 gold badge44 silver badges1010 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

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

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

You specifically need: npm install [email protected]

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

本文标签：