new "Default" Vue3 Project created, cannot be served: Error: "The template root requires exactly one element vue/no-multiple-template-root"

[via-lars]

Version

4.5.13

Reproduction link

https://github.com/via-lars/for-vuecli-bug-report-1

Environment info

Environment Info:

  System:
    OS: Windows 10 10.0.19043
    CPU: (16) x64 AMD Ryzen 7 PRO 4750U with Radeon Graphics
  Binaries:
    Node: 14.16.1 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.14.12 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1023.0), Chromium (92.0.902.55)
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1
    @vue/babel-helper-vue-transform-on:  1.0.2
    @vue/babel-plugin-jsx:  1.0.6
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  4.5.13
    @vue/babel-preset-jsx:  1.2.4
    @vue/babel-sugar-composition-api-inject-h:  1.2.1
    @vue/babel-sugar-composition-api-render-instance:  1.2.4
    @vue/babel-sugar-functional-vue:  1.2.2
    @vue/babel-sugar-inject-h:  1.2.2
    @vue/babel-sugar-v-model:  1.2.3
    @vue/babel-sugar-v-on:  1.2.3
    @vue/cli-overlay:  4.5.13
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.13
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.13
    @vue/cli-plugin-pwa: ~4.5.0 => 4.5.13
    @vue/cli-plugin-router:  4.5.13
    @vue/cli-plugin-vuex:  4.5.13
    @vue/cli-service: ~4.5.0 => 4.5.13
    @vue/cli-shared-utils:  4.5.13
    @vue/compiler-core:  3.1.5
    @vue/compiler-dom:  3.1.5
    @vue/compiler-sfc: ^3.0.0 => 3.1.5
    @vue/compiler-ssr:  3.1.5
    @vue/component-compiler-utils:  3.2.2
    @vue/eslint-config-prettier: ^6.0.0 => 6.0.0
    @vue/preload-webpack-plugin:  1.1.2
    @vue/reactivity:  3.1.5
    @vue/runtime-core:  3.1.5
    @vue/runtime-dom:  3.1.5
    @vue/shared:  3.1.5
    @vue/web-component-wrapper:  1.3.0
    eslint-plugin-vue: ^7.0.0 => 7.15.0
    vue: ^3.0.0 => 3.1.5
    vue-eslint-parser:  7.10.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.9.6 (16.3.3)
    vue-style-loader:  4.1.3
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

vue ui Tasks -> Serve Output: "hig\src\App.vue 3:3 error The template root requires exactly one element vue/no-multiple-template-root"

What is expected?

A newly created "default" Vue3 project can be served without error

What is actually happening?

An error occurs and the default project is not shown

---

I hope all configuration necessary to use vue ui and reprodcue it is present in the project folder uploaded to github. I just followed the documentation (https://cli.vuejs.org/guide/installation.html, https://cli.vuejs.org/guide/creating-a-project.html#vue-create) this morning and setup this project. I modified the ESLint configuration from "nothing" to "essential".

If you deem this bug no relevant to you, pls inform me where you think it is.

[LinusBorg]

The essential ruleset is for Vue 2. Vue 3 rulesets start with vue3/, like vue3/essential.

If those are missing in the ui select, we should add them.

[via-lars]

yes, they are missing

[via-lars]

can I workaround this by manually editing a config file i guess?

[LinusBorg]

yes, the eslint config is either in package.json or .eslintrc.js, depending on your choice where to put configs during project creation

[via-lars]

the following config

  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue3/essential",
      "eslint:recommended",
      "@vue/prettier"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    }
  }

produces the error Syntax Error: Error: Failed to load plugin 'vue3' declared in 'package.json': Cannot find module 'eslint-plugin-vue3'

[LinusBorg]

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