The Problem
We're building a new application and have opted to go with a GULP and Webpack pipeline for piling 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-piler 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-piler was replaced with @vue/piler-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-piler needs installing or to specify a patible piler via the options.
I've looked at various questions and answers on specifing the piler 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-piler\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-piler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-piler 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-piler must be installed as a peer dependency, or a patible piler implementation must be passed via options.
Error: [vue-loader] vue-template-piler must be installed as a peer dependency, or a patible piler 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\ponent-piler-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 piled 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/piler-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"
}
}
The Problem
We're building a new application and have opted to go with a GULP and Webpack pipeline for piling 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-piler 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-piler was replaced with @vue/piler-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-piler needs installing or to specify a patible piler via the options.
I've looked at various questions and answers on specifing the piler 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-piler\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-piler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-piler 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-piler must be installed as a peer dependency, or a patible piler implementation must be passed via options.
Error: [vue-loader] vue-template-piler must be installed as a peer dependency, or a patible piler 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\ponent-piler-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 piled 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/piler-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"
}
}
- I wonder, what is Gulp for here? I currently investigating possible usage of Gulp & Webpack as well but for building ponent library inside a monorepo project – user0103 Commented May 24, 2021 at 15:32
- @user0103 the primary purpose of GULP for us is to run specific types of tasks in 'Task Runner Explorer' (Visual Studio) either via a watcher or manually. For example, I've got it configured to build Production and Development files via Webpack as well as clean out orphaned files with only a click of a task and without needing a mand line or BASH open. This is important for us for a number of reasons, these primarily being an unfamiliarity to the process changes I'm embedding as well as my own laziness. – Damian Commented May 24, 2021 at 16:15
- Check this tutorial for Vue v3 setup without vue-cli: frontendguruji./blog/… – Mandeep Pasbola Commented Jan 2, 2022 at 8:26
2 Answers
Reset to default 16Just 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/piler-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.
just run this may be solve this problem npm i [email protected]