question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:open
  • Created 2 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

0reactions
via-larscommented, Aug 6, 2021

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'

Read more comments on GitHub >

github_iconTop Results From Across the Web

Vue 3 The template root requires exactly one element. eslint ...
I ended up turning off Vetur linting. Vetur thinks that it is a Vue 2 project becuase it is in a VS Code...
Read more >
Template root requires exactly one element #1297 - GitHub
I created a new Vue3 project, installed vetur for vscode and get the same issue. Added "vue/no-multiple-template-root": 0 and ...
Read more >
The template root requires exactly one element - Vue Forum
When creating a new vue project, I get an error saying the template root requires exactly one element. But this shoudn't be a...
Read more >
VueJS Component template should contain exactly one root ...
VueJS Component template should contain exactly one root element ; templates can contain one and only one root node. This is correct: ;...
Read more >
Creating our first Vue component - Learn web development
Vue templates are currently only allowed a single root element — one element needs to wrap everything inside the template section (this will ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found