Webpack 'vue-loader' compilation issues with '@vue/compiler-sfc'

Question

The Problem

We're building a new application and have opted to go with a GULP and Webpack pipeline for compiling SCSS, Vue 3 and Typescript files. Unfortunately, I've spent the last day looking for an answer to a recursive issue where I fix one problem and it reverts back to the previous problem, fix that problem it reverts to the one I've already fixed and so on.

As part of pulling in vue-loader an initial error is thrown stating vue-template-compiler is a required dependency. Downloading the missing dependency fixes the issue but now a new error is thrown stating a version mismatch with Vue as they both need to be on the same version.

After looking around I'm aware vue-template-compiler was replaced with @vue/compiler-sfc in v3, so naturally I've uninstalled the former and installed the latter. However, it lead me right back to square one where it stated vue-template-compiler needs installing or to specify a compatible compiler via the options.

I've looked at various questions and answers on specifing the compiler in webpack.config but constantly got lead back to stuff I'd viewed.

Attempted Solutions

Vue 3 Problem with Vue Template Webpack for Vue 3 Vue 3 Supporting Typescript

Error One

ERROR in ./Content/Vue/Login.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
Vue packages version mismatch:
- [email protected] (<Project Path>\node_modules\vue\index.js)
- [email protected] (<Project Path>\node_modules\vue-template-compiler\package.json)
This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

Error Two

ERROR in ./Content/Vue/Login.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
Error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
    at loadTemplateCompiler (<Project Path>\node_modules\vue-loader\lib\index.js:24:31)
    at Object.module.exports (<Project Path>\node_modules\vue-loader\lib\index.js:69:35)
ERROR in ./Content/Vue/Login.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
    at parse (<Project Path>\node_modules\@vue\component-compiler-utils\dist\parse.js:15:23)
    at Object.module.exports (<Project Path>\node_modules\vue-loader\lib\index.js:67:22)
webpack 5.36.2 compiled with 2 errors in 153 ms

Webpack Configuration

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
    entry: {
        login: "./Content/Vue/Login.vue"
    },
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname, "../../wwwroot/Distribution/Scripts")
    },
    mode: "development", 
    plugins: [
        new VueLoaderPlugin()
    ],
    resolve: {
        alias: {
            vue: "@vue/runtime-dom"
        }
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: "ts-loader",
                options: {
                    appendTsSuffixTo: [/\.vue$/],
                },
                exclude: /node_modules/
            },
            {
                test: /\.vue$/,
                loader: "vue-loader"
            }
        ]
    }
}

Package JSON Configuration

{
  "name": "***",
  "version": "1.0.0",
  "description": "***",
  "main": "index.js",
  "license": "UNLICENSED",
  "repository": "***",
  "scripts": {
    "webpack": "webpack --config=Scripts/Webpack/webpack.config.js"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.0.11",
    "css-loader": "^5.2.4",
    "file-loader": "^6.2.0",
    "gulp": "^4.0.2",
    "gulp-clean": "^0.4.0",
    "gulp-clean-css": "^4.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-rename": "^2.0.0",
    "gulp-run": "^1.7.1",
    "gulp-sass": "^4.1.0",
    "gulp-sourcemaps": "^2.6.5",
    "mini-css-extract-plugin": "^1.6.0",
    "ts-loader": "^9.1.1",
    "typescript": "^4.2.4",
    "url-loader": "^4.1.1",
    "vue-loader": "^15.9.6",
    "webpack": "^5.35.0",
    "webpack-cli": "^4.6.0"
  },
  "dependencies": {
    "vue": "^3.0.11",
    "vue-router": "^4.0.6"
  }
}

Answer 1

Just as I was about to post this question I figured out the problem. Essentially the vue-loader version is incorrect and answering this so another developer doesn't spend hours looking for an answer.

Early on in building the frontend structure for the application I hit an issue where the latest version of Vue in NPM is v2.6.12 and the next version is v3.0.11. Simple enough to resolve just specify the version.

Turns out it's the same issue with vue-loader and at the time of writing the latest version is v15.9.6 whilst the next version is v16.2.0. As you'll note from the included package.json file, the version specified is v15.9.6.

For Vue 3 to work alongside vue-loader it's imperative that the version installed is not below '16.2.0'.

Edit: 16 February 2022

The default download of Vue via NPM now pulls down v3. Dependent packages (e.g. vue-loader, @vue/compiler-sfc etc) have been modified so the latest version pulled down works with Vue v3 rather than v2. Theoretically this will mean the problem within the question will disappear.