5

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" } }
Improve this question
3
  • I wonder, what is Gulp for here? I currently investigating possible usage of Gulp & Webpack as well but for building component library inside a monorepo project 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 command 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. Commented May 24, 2021 at 16:15
  • Check this tutorial for Vue v3 setup without vue-cli: frontendguruji.com/blog/… Commented Jan 2, 2022 at 8:26

2 Answers 2

Reset to default
16

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

just run this may be solve this problem npm i [email protected]

Improve this answer

1 Comment

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.