vite: eslint error "The template root requires exactly one element" on latest Vite+eslint+eslint-plugin-vue(alpha)

Do NOT ignore this template or your issue will have a very high chance to be closed without comment.

Describe the bug

New Vite install, with eslint and “eslint-plugin-vue”: “^7.0.0-alpha.9”, results in errors about multiple template roots. It’s the same as this one: https://github.com/vitejs/vite/issues/549 but I just experienced it with the latest version (with or without Vetur).

Reproduction

It’s just a clean Vite install (never used Vite before), with locally added eslint and eslint-plugin-vue@7.0.0-alpha.9and an eslint file that extends 'plugin:vue/vue3-essential' and 'plugin:vue/recommended'.

System Info

required vite version: 1.0.0-rc.13
required Operating System: Mac OS Catalina (10.15.7)
required Node version: 12.14.1
Optional:
- npm/yarn version: 6.14.8
- Installed vue version (from yarn.lock or package-lock.json): 3.0.4
- Installed @vue/compiler-sfc version: 3.0.4

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 20

Most upvoted comments

Ok I finally got it to work. I would suggest adding something to the docs for this:

First install eslint and eslint-plugin-vue locally:

npm install --dev eslint eslint-plugin-vue

Then add a .eslintrc.js file in the root with the following settings:

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
  ],
  plugins: ['vue'],
}

TheDutchCoder on Dec 21, 2020

The mistake in your original .eslintrc config is that you extend plugin:vue/recommended instead of plugin:vue/vue3-recommended.

https://eslint.vuejs.org/user-guide/#usage

I don’t think there’s anything missing in docs.

LinusBorg on Dec 22, 2020