Vuejs 3 webpack : Problem with vue-template-compiler

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.

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

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