The Challenge
Embarking on the development of a new application, we decided to implement a GULP and Webpack pipeline for compiling SCSS, Vue 3, and Typescript files. However, my recent endeavors have been consumed by a perplexing dilemma. Every time I address one issue, it circles back to a previous problem, creating a frustrating cycle of troubleshooting.
Upon integrating vue-loader, an initial error emerged indicating that vue-template-compiler is an essential dependency. Resolving this missing element resulted in a new complication – a version inconsistency with Vue, necessitating them to be synchronized.
Familiarizing myself with the fact that vue-template-compiler was superseded by @vue/compiler-sfc in version 3, I meticulously uninstalled the former and installed the latter. To my dismay, this action only propelled me back to square one, prompting once more the installation of vue-template-compiler or specification of a compatible compiler through the options.
Diving into various resources concerning compiler configuration within webpack.config proved fruitless, as they merely redirected me to familiar content.
Potential Solutions Attempted
Resolving Vue Template Issue in Vue 3 Optimizing Webpack for Vue 3 Supporting Typescript in Vue 3
Error One Encountered
ERROR in ./Content/Vue/Login.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
Vue packages version mismatch:
- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3046455570031e001e0101">[email protected]</a> (<Project Path>\node_modules\vue\index.js)
- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8deddcd85dccdc5d8c4c9dccd85cbc7c5d8c1c4cddae89a869e86999a">[email protected]</a> (<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 Encountered
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
Configuration of Webpack Setup
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 Overview
{
"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"
}
}