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?

Conductance

Check this tutorial for Vue v3 setup without vue-cli: frontendguruji.com/blog/… – Potassium

Answer 1

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

1. init the package.json like :

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

2. install the last version of vue :

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

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

4. 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
  }
});

5. 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": {
      ...
    }
}

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

Boesch

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

Hi Boussadjra Brahim, Could you please look at the question #67956801? – Generable

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

Answer 2

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

Corrade

Answer 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

Felicio

Answer 4

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`
  ],

Cece

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