javascriptvue.jswebpackvuejs3vue-loader

Vuejs 3 webpack : Problem with vue-template-compiler


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:

- vue@3.0.2 (/home/alejo/playground/parquesFrontend/node_modules/vue/index.js)
- vue-template-compiler@2.6.12 (/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 vue-template-compiler@3.0.2 I get this error:

❯ npm install vue-template-compiler@3.0.2
npm ERR! code ETARGET
npm ERR! notarget No matching version found for vue-template-compiler@3.0.2.
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?


Solution

  • 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,
       
    }
    
    1. install the last version of vue :

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

    1. 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
    
    1. 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
      }
    });
    
    
    1. 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": {
          ...
        }
    }
    
    
    1. 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.

    Edit webpack-vue3