Issue with vue-template-compiler in Vue.js 3 webpack configuration

Question

Issue with vue-template-compiler in Vue.js 3 webpack configuration

I am currently working on integrating vuejs 3 into a project that already utilizes webpack. I have been looking into using vue-loader as part of this process.

After consulting the official documentation, I came across the following information:

Every new release of Vue comes with an accompanying version of vue-template-compiler. It is crucial to ensure that the compiler's version matches the base Vue package in order for vue-loader to generate code that is compatible with the runtime. Therefore, whenever you update Vue in your project, it is necessary to also update vue-template-compiler to maintain synchronization.

However, when attempting to compile, I encountered the following error message:

Vue packages version mismatch:

- [email protected] (/home/alejo/playground/parquesFrontend/node_modules/vue/index.js)
- [email protected] (/home/alejo/playground/parquesFrontend/node_modules/vue-template-compiler/package.json)

This discrepancy may lead to erroneous functionality. Ensure both versions match.
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 automatically bump up vue-template-compiler to the latest version.

Furthermore, when I attempted to install [email protected], I encountered the following error:

❯ npm install [email protected]
npm ERR! code ETARGET
npm ERR! notarget No matching version found for [email protected].
npm ERR! notarget In most cases, either you or one of your dependencies is requesting
npm ERR! notarget a non-existent package version.

npm ERR! For more details, refer to the full log:
npm ERR!     /home/alejo/.npm/_logs/2020-11-17T02_52_46_458Z-debug.log

How can I go about resolving this issue?

javascript vue.js webpack vuejs3 vue-loader

Answer 1

Answer №1

For a seamless integration of Vue 3 with webpack without relying on vite or vue cli, you can follow these guidelines:

Initialize the package.json as shown below :

{
    "private": true,
    "name": "vue-3",
    "description": null,
   
}

Install the latest version of Vue :

 npm i --save vue@next vue-loader@next

Also, install the necessary dev dependencies which includes @vue/compiler-sfc replacing vue-template-compiler

npm i -D @vue/compiler-sfc css-loader file-loader mini-css-extract-plugin
 url-loader webpack webpack-cli webpack-dev-server

@vue/compiler-sfc
css-loader
file-loader
mini-css-extract-plugin
url-loader
vue-loader
webpack
webpack-cli
webpack-dev-server

Create or modify your webpack.config.js with the provided content :

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// Remaining configuration code here

Include a dev script to run your application :

{
    "private": true,
    "scripts": {
        "dev": "webpack-dev-server"
    },
    "dependencies": {
        "vue": "^3.0.2"
    },
    "name": "vue-3",
    "description": null,
    "devDependencies": {
      ...
    }
}

Ensure that your index.html contains the following elements :

<link rel="stylesheet" href="/dist/main.css" />
<div id="app"></div>
<script src="/dist/main.js"></script>

Finally, execute npm run dev and visit http://localhost:8080/

If you prefer to skip the configuration steps, you can clone this REPOSITORY following the provided instructions.

https://codesandbox.io/s/webpack-vue3-kl9k2?fontsize=14&hidenavigation=1&theme=dark

Answer 2

For a seamless integration of Vue 3 with webpack without relying on vite or vue cli, you can follow these guidelines:

Initialize the package.json as shown below :

{
    "private": true,
    "name": "vue-3",
    "description": null,
   
}

Install the latest version of Vue :

 npm i --save vue@next vue-loader@next

Also, install the necessary dev dependencies which includes @vue/compiler-sfc replacing vue-template-compiler

npm i -D @vue/compiler-sfc css-loader file-loader mini-css-extract-plugin
 url-loader webpack webpack-cli webpack-dev-server

@vue/compiler-sfc
css-loader
file-loader
mini-css-extract-plugin
url-loader
vue-loader
webpack
webpack-cli
webpack-dev-server

Create or modify your webpack.config.js with the provided content :

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// Remaining configuration code here

Include a dev script to run your application :

{
    "private": true,
    "scripts": {
        "dev": "webpack-dev-server"
    },
    "dependencies": {
        "vue": "^3.0.2"
    },
    "name": "vue-3",
    "description": null,
    "devDependencies": {
      ...
    }
}

Ensure that your index.html contains the following elements :

<link rel="stylesheet" href="/dist/main.css" />
<div id="app"></div>
<script src="/dist/main.js"></script>

Finally, execute npm run dev and visit http://localhost:8080/

If you prefer to skip the configuration steps, you can clone this REPOSITORY following the provided instructions.

https://codesandbox.io/s/webpack-vue3-kl9k2?fontsize=14&hidenavigation=1&theme=dark

Answer 3

Answer №2

For Vue 3, it is recommended to utilize vue-loader@next

In Vue 3, the SFC compiler package has transitioned from vue-template-compiler to compiler-sfc (refer here for details)

I fully support using Vue CLI for project management as it simplifies handling dependencies, especially during the ongoing transition of the Vue 3 ecosystem where some tools lack migration documentation like vue-loader

If unable to adopt CLI due to an existing Webpack configuration, leverage CLI as a reference. Create a new project on the side, use vue inspect command to analyze the current Webpack setup and review the package.json for necessary dependencies...

Answer 4

For Vue 3, it is recommended to utilize vue-loader@next

In Vue 3, the SFC compiler package has transitioned from vue-template-compiler to compiler-sfc (refer here for details)

I fully support using Vue CLI for project management as it simplifies handling dependencies, especially during the ongoing transition of the Vue 3 ecosystem where some tools lack migration documentation like vue-loader

If unable to adopt CLI due to an existing Webpack configuration, leverage CLI as a reference. Create a new project on the side, use vue inspect command to analyze the current Webpack setup and review the package.json for necessary dependencies...

Answer 5

Answer №3

Recently, I integrated the Webpacker gem into my Rails project, which includes useful tasks for setting up Vue.

However, it currently installs Vue 2.x along with its loader and template compiler...

To upgrade to Vue 3 and its related dependencies, simply execute the following command:

yarn add vue@next vue-loader@next @vue/compiler-sfc

And just like that, you'll be working with Vue 3!

Answer 6

Recently, I integrated the Webpacker gem into my Rails project, which includes useful tasks for setting up Vue.

However, it currently installs Vue 2.x along with its loader and template compiler...

To upgrade to Vue 3 and its related dependencies, simply execute the following command:

yarn add vue@next vue-loader@next @vue/compiler-sfc

And just like that, you'll be working with Vue 3!

Answer 7

Answer №4

After manually upgrading a Vue2 application to Vue3, I encountered an error while running unit tests post updating all dependencies.

To resolve the issue, I had to make adjustments to Jest's configuration file as well.

In jest.config.js, ensure the "transform" property is set as follows:

{
  transform: '^.+\\.vue$': `vue-jest`
}

The dependencies I utilized for this transition were obtained from a new Vue3.0 application that I created using the CLI. The following are the dependencies included in my CLI configurations:

  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3",
    "vue-jest": "^5.0.0-0"
  }

Please note that in my CLI settings, the .eslintrc.js file also underwent some minor alterations for compatibility with Vue3. In a fresh installation, the CLI sets the "extends" property as shown below:

  extends: [
    `plugin:vue/vue3-essential`,
    `eslint:recommended`
  ],

Answer 8

After manually upgrading a Vue2 application to Vue3, I encountered an error while running unit tests post updating all dependencies.

To resolve the issue, I had to make adjustments to Jest's configuration file as well.

In jest.config.js, ensure the "transform" property is set as follows:

{
  transform: '^.+\\.vue$': `vue-jest`
}

The dependencies I utilized for this transition were obtained from a new Vue3.0 application that I created using the CLI. The following are the dependencies included in my CLI configurations:

  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3",
    "vue-jest": "^5.0.0-0"
  }

Please note that in my CLI settings, the .eslintrc.js file also underwent some minor alterations for compatibility with Vue3. In a fresh installation, the CLI sets the "extends" property as shown below:

  extends: [
    `plugin:vue/vue3-essential`,
    `eslint:recommended`
  ],

Issue with vue-template-compiler in Vue.js 3 webpack configuration

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Discover the Google Chrome Extension that allows you to easily obtain JSON data from your

Adding Axios package to a Vue 3 project without using the CLI

The process of generating a querystring from a form using jQuery is not functioning as expected

How to send Multipart form data with a string payload

Scalable Vector Graphics Form Field

I am new to javascript and jquery. I have encountered numerous cases involving audio players

Learn the steps for filling the color area between two points in HighCharts

Masonry layout organizes images in a vertical stack, with one image per row

Discover the steps to linking a dropdown menu to a text input using HTML and JavaScript

Instructions on integrating Realm SDK with Vue3

jQuery failing to append code after being removed

The nested jade elements are failing to render

Enabling real-time notifications through Express 4 middleware with socket.io integration

Tips for adjusting image dimensions with url() method in css

Tips for restricting the size of uploaded files or the quantity of files in multer express and effectively managing any errors

Angular with Firebase: How to ignore a field in a query

Reset filter when the "All" option is chosen in Vue.js

In Vue JS, what is the best way to access my data within a filter function written in Javascript?

Searching for an object within an array in NodeJS that is not present in another array

Delete an <li> element upon clicking a span tag