Vuejs 3 webpack : Problem with vue-template-compiler

Question

I am trying to integrate vuejs 3 to an existing project which uses webpack. I read about vue-loader, so I am trying to use it.

In the official documentation I have this:

Every time a new version of vue is released, a corresponding version of vue-template-compiler is released together. The compiler's version must be in sync with the base vue package so that vue-loader produces code that is compatible with the runtime. This means every time you upgrade vue in your project, you should upgrade vue-template-compiler to match it as well.

So, when I try to compile I get this error:

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 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.

But when I try to install [email protected] I get this 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 you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/alejo/.npm/_logs/2020-11-17T02_52_46_458Z-debug.log

How can I solve this problem?

Check this tutorial for Vue v3 setup without vue-cli: frontendguruji.com/blog/… — Mandeep Pasbola
– Mandeep Pasbola, Commented Jan 2, 2022 at 8:29

Alejo Dev · Accepted Answer · 2020-11-18 07:03:23Z

54

To make vue 3 work fine with webpack without using vite or vue cli follow these steps :

init the package.json like :

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

install the last version of vue :

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

install also the dev dependencies that includes @vue/compiler-sfc which replaces 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 edit your webpack.config.js with following content :

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

module.exports = (env = {}) => ({
  mode: env.prod ? "production" : "development",
  devtool: env.prod ? "source-map" : "cheap-module-eval-source-map",
  entry: [
    require.resolve(`webpack-dev-server/client`),
    path.resolve(__dirname, "./src/main.js")
  ].filter(Boolean),
  output: {
    path: path.resolve(__dirname, "./dist"),
    publicPath: "/dist/"
  },
  resolve: {
    alias: {
      // this isn't technically needed, since the default `vue` entry for bundlers
      // is a simple `export * from '@vue/runtime-dom`. However having this
      // extra re-export somehow causes webpack to always invalidate the module
      // on the first HMR update and causes the page to reload.
      vue: "@vue/runtime-dom"
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: "vue-loader"
      },
      {
        test: /\.png$/,
        use: {
          loader: "url-loader",
          options: { limit: 8192 }
        }
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: { hmr: !env.prod }
          },
          "css-loader"
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
      filename: "[name].css"
    })
  ],
  devServer: {
    inline: true,
    hot: true,
    stats: "minimal",
    contentBase: __dirname,
    overlay: true,
    injectClient: false,
    disableHostCheck: true
  }
});

Add dev script to run your app :

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

Fill the index.html with following content :

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

Finally run npm run dev the visit http://localhost:8080/

for a ready to use project try to clone this REPOSITORY which built by following the steps above.

edited Nov 18, 2020 at 7:03

Alejo Dev

2,6466 gold badges35 silver badges49 bronze badges

answered Nov 17, 2020 at 18:21

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

3 Comments

Beth Over a year ago

Broussadjra Brahim's suggestions worked for me. Thank you! I've been working on resolving this for a while.

Suman Bogati Over a year ago

Hi Boussadjra Brahim, Could you please look at the question stackoverflow.com/questions/67956301/…?

Boussadjra Brahim Over a year ago

I've already seen it, could you provide the example in codesanbox?

Michal Levý · Accepted Answer · 2021-10-01 16:18:17Z

18

I believe you need to use vue-loader@next with Vue 3

In Vue 3 the SFC compiler package is no longer vue-template-compiler but compiler-sfc (check here)

I completely agree with the suggestion to use Vue CLI to manage the project - it will save you lot of trouble managing all the dependencies (especially now when Vue 3 ecosystem is trying to catch-up with Vue 3 release and lots of tool even don't have any migration documentation ....like vue-loader)

If you are not able to use CLI because your existing project already have Webpack config, you can still use CLI as a guide. Just generate new project on the side, use vue inspect command to inspect Webpack config it is using and package.json for required dependencies...

edited Oct 1, 2021 at 16:18

answered Nov 17, 2020 at 9:31

Michal Levý

38.6k8 gold badges82 silver badges93 bronze badges

Comments

luigi7up · Accepted Answer · 2021-01-17 19:06:59Z

3

I've just installed the Webpacker gem in rails that comes with nice tasks that install Vue.

Nevertheless, it installs Vue 2.x with its loader and template compiler...

To bump everything to Vue 3 aand its dependencies simply run:

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

Voila! You're using Vue 3 now

answered Jan 17, 2021 at 19:06

luigi7up

5,9823 gold badges53 silver badges60 bronze badges

Comments

Langlois.dev · Accepted Answer · 2020-12-02 16:23:49Z

2

I upgraded a Vue2 app to Vue3 manually and I was getting this error when I was running the unit tests after upgrading all of the dependencies.

To get everything working, I also had to fix Jest's config file.

In jest.config.js set the "transform" property to:

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

The dependencies I used to get started were from a new Vue3.0 app I created using the cli. Below are the dependencies that my cli settings got me:

  "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"
  }

Note that for my cli settings, the .eslintrc.js also has some minor changes in it for Vue3. In a fresh install the cli makes the "extends" property as below:

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

edited Dec 2, 2020 at 16:23

answered Dec 2, 2020 at 16:17

Langlois.dev

2,1512 gold badges14 silver badges15 bronze badges

1 Comment

jonashackt Over a year ago

Bringing my 2.6 tests to work again with 3.x changing the jest.config.js was the thing that worked! Be aware that the accepted answer refers to a scenario without using vue cli, which I would consider the standard way to upgrade from 2.x -> 3.x (with the latest npm install -g @vue/cli) using the migration command vue add vue-next. So this answer here is far underrated IMHO.

user27847924 · Accepted Answer · 2024-10-17 08:14:47Z

0

I had the same issue with vue3. I had to uninstall node and the version in .nvm in my computer manually and reinstall it with nvm and it worked

answered Oct 17, 2024 at 8:14

user27847924

1

1 Comment

JGG Over a year ago

This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. To get notified when this question gets new answers, you can follow this question. Once you have enough reputation, you can also add a bounty to draw more attention to this question. - From Review

Collectives™ on Stack Overflow

Vuejs 3 webpack : Problem with vue-template-compiler

5 Answers 5

3 Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related