Vue-loader: Template syntax error Component template should only contain exactly one root element

[junerockwell]

Using:

Node v6.6.0.
vue-loader v9.5.1
Vue v2.0.1
Vue-Router 2.0.0
Vuex 2.0.0
Vuex-Router-Sync 2.1.1

The error says it all:

I fixed it by enclosing everything inside Page1.vue by a <div> without class and id attributes. This enclosing <div> or root element wasn't required in [email protected]. Does it really have to be required? Can it be optional like before? Thanks.

[yyx990803]

Yes, this is required in 2.0.

[XiaoLiz]

Me too! Your vue-loader version problem! try npm install --save-dev [email protected]

Perfect solution

[shanoor]

I just wasted my afternoon because of this. It was working fine with Webpack dev server but when deployed on a nginx server, no component was displayed and no error displayed (normal behaviour for a production build I guess). Weirder, using http-server node package inside the dist folder worked just fine. I then cleaned my project, ran Webpack again and this unique root element error showed despite my (pug) template having exactly one root element...

@XiaoLiz, thank you, changing vue-loader version solved the issue.

[solidevolution]

Got this error too with

"vue": "^2.0.3",
"vue-cookie": "^1.0.0",
"vue-resource": "^1.0.3",
"vue-router": "^2.0.2"

with 9.* versions of vue-loader in devDependencies ...

[shanoor]

@solidevolution You should try to downgrade vue-loader version, it solved the issue for me. You'll also need to install 2 other packages:

"vue-hot-reload-api": "^1.2.0",
"vue-html-loader": "^1.0.0",
"vue-loader": "^8.3.0",

[solidevolution]

Surely we did that but now we have to decide

1. Use jade/pug but vue-loader 8.* which means, no hot reload feature ...
2. Don't use jade/pug but vue-loader 9.*

Both options aren't what we want. We hope you'll find a solution for this fast.

[anyexinglu]

@solidevolution , can't agree more, seems that the version of vue-loader isn't backward-compatible.

[guillermovs]

What's the reason why this is required in 2.0?
It doesn't feel right to add unnecessary root elements to components just to get rid of the error.

[SuperChrisliu]

<template>
  <el-button @click="refreshTable" >button</el-button>
  <el-table :data="tableData" stripe fit style="width: 100%">
    <el-table-column v-for="columnInfo in hospitalThead" :prop="columnInfo.name" :label="columnInfo.label" width="180"></el-table-column>
  </el-table>
</template>

An error has occurred in this template.
error info : component template should contain exactly one root element

solve problem with this:

<template>
  <div>
  <el-button @click="refreshTable" >button</el-button>
  <el-table :data="tableData" stripe fit style="width: 100%">
    <el-table-column v-for="columnInfo in hospitalThead" :prop="columnInfo.name" :label="columnInfo.label" width="180"></el-table-column>
  </el-table>
    </div>
</template>

[solidevolution]

@xchz This is not the problem. I think anyone here knows that.
We all had version conflicts in special cases, me as example while using pug/jade and the newest vue-loader version.

[SuperChrisliu]

@solidevolution ok....

[yordis]

@yyx990803 could you explain the reasons why this is required on 2.0? I just want to learn about the core.

[gholol]

Ping @yyx990803 as I would like to know it as well.

[harrywong]

I also try to add two component into one table row, but with this limitation, i can't easily do this. so please give some options. thanks.

[LinusBorg]

This issue is closed, Please use the forum for questions.

forum.vuejs.org