vue__WEBPACK_IMPORTED_MODULE_0__ is not a constructor

Question

Starting a new Vue App and facing following err at initializing

my code is:

App.vue :

<template>
    <div>
      hi there
    </div>
</template>

<script>

export default {
    name: 'App'
};
</script>

main.js :

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

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

Got this err in browser so no content ('hi there') is rendered! :

Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_0__ is not a constructor
    at eval (main.js?fbea:4:1)
    at Module../src/main.js (app.js:59:1)
    at __webpack_require__ (app.js:158:33)
    at app.js:1263:109
    at Function.__webpack_require__.O (app.js:204:23)
    at app.js:1264:53
    at app.js:1266:12

any ideas?

(no errors in my terminal)

Answer 1

My problem was because of the Vue version, I was using Vue-Js v3 but coding in version 2 (because of my tutorial course, believe me I'm not stupid LOL) which caused the errors.

There are lots of updates and one of the very basic of them is for initializing instead of using:

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

I should've simply used:

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

Answer 2

Try changing your main.js code to this:

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

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

If it works for you you will have to import each functionality individually, for example, if you want to add router and store then the code would be:

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

createApp(App).use(store).use(router).mount('#app')

---

Also..

You may have to add this line before createApp(App).use(store).use(router).mount('#app') depending on your versions of babel and vue:

export const eventBus = createApp(App);