export 'createStaticVNode' (imported as '_createStaticVNode') was not found in 'vue'

[pmediavictor]

Version

16.3.0

Reproduction link

vuejs/vue-router#3590

Steps to reproduce

I am totally new on Laravel VueJs. I am using laravel 8 and VueJS 2.6.12 with Vue-Router 3.5.2.

I am getting following error when I run command below:

*npm run dev*    

WARNING in ./resources/js/components/Dashboard.vue?vue&type=template&id=040e2ab9 (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Dashboard.vue?vue&type=template&id=040e2ab9) 6:30-48
export 'createStaticVNode' (imported as '_createStaticVNode') was not found in 'vue' (possible exports: default)

WARNING in ./resources/js/components/Dashboard.vue?vue&type=template&id=040e2ab9 (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Dashboard.vue?vue&type=template&id=040e2ab9) 9:9-19
export 'openBlock' (imported as '_openBlock') was not found in 'vue' (possible exports: default)

WARNING in ./resources/js/components/Dashboard.vue?vue&type=template&id=040e2ab9 (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Dashboard.vue?vue&type=template&id=040e2ab9) 9:23-35
export 'createBlock' (imported as '_createBlock') was not found in 'vue' (possible exports: default)    

I have no idea where am I making mistake?

Dashboard.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Dashboard</div>

                    <div class="card-body">
                        I'm an dashboard component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

app.js

require('./bootstrap');

import Vue from 'vue'
import VueRouter from 'vue-router'
import Dashboard from './components/Dashboard.vue'

Vue.use(VueRouter)

let routes = [
  { path: '/dashboard', component: Dashboard }
]

const router = new VueRouter({
  routes: routes
})
  

const app = new Vue({
  router
}).$mount('#app')

Here is my package.json file. I have VueJS 2.6.12 with Vue-Router 3.5.2.

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@popperjs/core": "^2.9.2",
        "@vue/compiler-sfc": "^3.1.4",
        "axios": "^0.21",
        "bootstrap": "^4.6.0",
        "jquery": "^3.6",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "popper.js": "^1.16.1",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1",
        "vue": "^2.6.12",
        "vue-loader": "^16.2.0",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "@fortawesome/fontawesome-free": "^5.15.3",
        "admin-lte": "^3.1.0",
        "bootstrap-vue": "^2.21.2",
        "vue-router": "^3.5.2"
    }
}

Can someone help where is issue? I beginner and need suggestion.

What is expected?

No issues

What is actually happening?

get error

[haoqunjiang]

vue-loader v16 is for Vue 3. So please use vue-loader v15 in your project.

[pmediavictor]

Thanks @sodatea ,