VueJS: Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_4__.default is not a constructor

Viewed 8692

I am referring https://youtu.be/5lVQgZzLMHc?t=800 to build my first Vuex application. This is a 2018 tutorial so my main.js looks a bit different. I am using Vue 3.0.2 (as shown in Vue developer tool).

This is what my main.js looks:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

So, I made changes to this file in order to match what is in the tutorial:

import Vue from 'vue';
import App from './App.vue'

new Vue({
    render: h => h(App)
}).$mount("#app");

But this gives me the following console error:

Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_4__.default is not a constructor

I ignored it and went ahead with the tutorial. According to the tutorial I created store/index.js file with the following contnet:

import Vuex from 'vuex';
import Vue from 'vue';
import todos from './modules/todos';

// Load Vuex
Vue.use(Vuex);

// Create the store
export default new Vuex.Store({
    modules: {
        todos
    }
});

I also have created todos.js file inside store/modules directory which looks like this:

const state = {
    todos: [
        {
            id: 1,
            title: 'Learn Vuex'
        },
        {
            id: 2,
            title: 'Resolve errors'
        }
    ]
};

const getters = {
    allTodos: (state) => state.todos
};

const actions = {};

const mutations = {};

export default {
    state,
    getters,
    actions,
    mutations
}

Then I modified my main.js like this:

import Vue from 'vue';
import App from './App.vue'
import todos from './store'

new Vue({
    store,
    render: h => h(App)
}).$mount("#app");

And now the error changes to this:

index.js?4360:6 Uncaught TypeError: Cannot read property 'use' of undefined

I am only a learner of Vue in very early stage. Cannot figure out how I can resolve these issues, especially with the changes in syntax and pattern of main.js file.

UPDATE
If I have understood correctly , the boilerplate (vue create .) did not add any webpack dependency in the project.

"dependencies": {
  "axios": "^0.21.0",
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vuex": "^3.5.1"
},
"devDependencies": {
  "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0"
},

Looks like from here that having Webpack dependency is not mandatory. But I cannot go further with this because I don't know what to do.

0 Answers
Related