Vue 3: TypeError: compiler.parseComponent is not a function

Question

I can't seem to get rid of this error.

I've tried removing package-lock.json & node_modules followed by npm install, but, it's not working.

• Node Version: 12.18.3
  
• NPM Version: 6.14.8

Any help is appreciated!

---

Lovely Error

ERROR in ./src/scripts/Test.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: compiler.parseComponent is not a function
    at parse (some path\node_modules\@vue\component-compiler-utils\dist\parse.js:15:23)
    at Object.module.exports (some path\node_modules\vue-loader\lib\index.js:67:22)
 @ ./src/scripts/app.js 8:0-30 10:10-14

package.json

{
    "name": "app",
    "version": "1.0.0",
    "description": "",
    "private": true,
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@vue/compiler-sfc": "^3.0.2",
        "vue-loader": "^15.9.4",
        "webpack": "^4.44.1",
        "webpack-cli": "^3.3.12"
    },
    "dependencies": {
        "vue": "^3.0.2"
    }
}

webpack.config.js

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    mode: 'development',
    entry: './src/scripts/app.js',
    output: {
        filename: 'scripts/app.js'
    },
    plugins: [
        new VueLoaderPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: [
                    {
                        loader: 'vue-loader',
                        options: {
                            // Fixes the "vue-template-compiler" error.
                            compiler: require('@vue/compiler-sfc')
                        }
                    }
                ]
            }
        ]
    },
    watch: true
};

src/scripts/app.js

import { createApp } from 'vue';
import Test from './Test.vue';

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

src/scripts/Test.vue

<template>
    <p>{{ message }}</p>>
</template>

<script>
    export default {
        data() {
            return {
                message: "I'm giving up!"
            }
        }
    }
</script>

Answer 1

Steps to fix the problem:

1. Upgrade vue-loader to ^16.0.0-beta.9.
2. Change const VueLoaderPlugin = require('vue-loader/lib/plugin'); to const { VueLoaderPlugin } = require('vue-loader');.