Vue 3: TypeError: compiler.parseComponent is not a function - node.js

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:
Upgrade vue-loader to ^16.0.0-beta.9.
Change const VueLoaderPlugin = require('vue-loader/lib/plugin');
to const { VueLoaderPlugin } = require('vue-loader');.