[快应用] ERROR: <template>节点里只能有一个根节点 #4379

tourze · 2019-09-03T07:50:25Z

问题描述
快应用编译报错：

ERROR: <template>节点里只能有一个根节点

复现步骤

import Taro from '@tarojs/taro'
import {connect} from "@tarojs/redux";
import showLoading from "@/utils/showLoading";
import callAPI from "@/utils/callAPI";
import hideLoading from "@/utils/hideLoading";
import withShare from "@/utils/withShare";
import getCurrentPagePath from "@/utils/getCurrentPagePath";
import showErrorLogin from '@/utils/showErrorLogin'
import Blank from '@/base/components/blank'
import JoinTeamCaptainHead from '@/pintuan/components/join-team-captain-head';
import JoinTeamGroupAction from '@/pintuan/components/join-team-group-action';
import TeamItemListBlock from '@/pintuan/components/team-item-list-block';
import {GROUP_SALE_DETAIL_PAGE_DATA} from "@/constants";
import BaseRichText from "@/base/components/rich-text";
import AtPageContainer from "@/taro-ui/components/page-container";

@connect(
  state => state
)
@withShare()
class Index extends Taro.Component {

  config = {
    navigationBarTitleText: '团购详情',
  }

  state = {
    share_mid:0// 分享进来
  }

  // 这里分享一个share_mid 过去
  $setSharePath = () => {
    const {memberInfo} = this.props;
    const { params = {} } = this.$router;
    const currentPage = getCurrentPagePath();
    return `${currentPage}?team_id=${params.team_id}&share_mid=${memberInfo.id}`;
  };

  $setShareTitle = () => {
    return this.config.navigationBarTitleText;
  };

  $setShareDesc = () => {
    return  '小伙伴们快加入我的团购吧！';
  };

  $setShareImageUrl = () => {
    return '';
  };

  componentDidMount() {
    const params = this.$router.params;
    this.setState({
      share_mid:params.share_mid ? params.share_mid : 0,
      team_id:params.team_id ? params.team_id : 0,
    },()=>{
      this.getTeamDetail()
    })
  }

  getTeamDetail = () =>{
    showLoading();
    const {share_mid,team_id} = this.state;
    callAPI('apiGetGroupSaleTeamDetail',{
      id:team_id,
      share_mid
    }).then((result)=>{
      hideLoading();
      return  this.props.dispatch({
        type:GROUP_SALE_DETAIL_PAGE_DATA,
        data:{
          ...result
        }
      })
    }).catch(showErrorLogin)
  }

 renderBlank = ()=>{
   return (
     <Blank
       diyStyle={{
         height: 20,
       }}
     />
   )
 }

  render () {
    const {share_mid} = this.state;
    const {groupTeamDetail} = this.props;

    return (
      <AtPageContainer>
        {/*团详情-状态*/}
        {!share_mid ? (
          <JoinTeamCaptainHead />
        ) : null}

        {this.renderBlank()}

        {/*参团商品信息*/}
        <TeamItemListBlock />

        {this.renderBlank()}

        {/*团成员*/}
        <JoinTeamGroupAction />

        {this.renderBlank()}

        {/*团规则*/}

        <BaseRichText
          title='拼团规则'
          text={groupTeamDetail.rule}
        />
      </AtPageContainer>
    );
  }
}

export default Index;

最终被转译成：

<import src='../../../../npm/@tarojs/components-qa/src/components/taro-page/index' name='taro-page'></import>
<import src='../../../base/components/blank/index' name='blank'></import>
<import src='../../../../taro-ui/components/page-container/index' name='at-page-container'></import>
<import src='../../components/join-team-captain-head/index' name='join-team-captain-head'></import>
<import src='../../components/team-item-list-block/index' name='team-item-list-block'></import>
<import src='../../components/join-team-group-action/index' name='join-team-group-action'></import>
<import src='../../../base/components/rich-text/index' name='base-rich-text'></import>
<template>
<template name="renderBlank">
    <taro-page tabBar="{{tabBar__temp}}" pagePath="{{pagePath__temp}}">
        <blank compid="{{priCompid__601}}"></blank>
    </taro-page>
</template>
<taro-page tabBar="{{tabBar__temp}}" pagePath="{{pagePath__temp}}">
    <at-page-container>
        <div if="{{!share_mid}}">
            <join-team-captain-head></join-team-captain-head>
        </div>
        <template is="renderBlank" data="{{...anonymousState__temp2}}"></template>
        <team-item-list-block></team-item-list-block>
        <template is="renderBlank" data="{{...anonymousState__temp3}}"></template>
        <join-team-group-action></join-team-group-action>
        <template is="renderBlank" data="{{...anonymousState__temp4}}"></template>
        <base-rich-text compid="{{priCompid__602}}"></base-rich-text>
    </at-page-container>
</taro-page>
</template>
<script>
import Taro, { internal_safe_get, internal_get_original, internal_inline_style, getElementById, genCompid, genLoopCompid, propsManager } from "../../../../npm/@tarojs/taro-quickapp/index.js";
import { connect } from "../../../../npm/@tarojs/redux/index.js";
import showLoading from "../../../../utils/showLoading.js";
import callAPI from "../../../../utils/callAPI.js";
import hideLoading from "../../../../utils/hideLoading.js";
import withShare from "../../../../utils/withShare.js";
import getCurrentPagePath from "../../../../utils/getCurrentPagePath.js";
import showErrorLogin from "../../../../utils/showErrorLogin.js";

import { GROUP_SALE_DETAIL_PAGE_DATA } from "../../../../constants.js";

@connect(state => state)
@withShare()
class Index extends Taro.Component {
  static properties = {
    "member_info": {
      "type": null,
      "value": null
    },
    "dispatch": {
      "type": null,
      "value": null
    },
    "group_team_detail": {
      "type": null,
      "value": null
    }
  };
  $usedState = ["priCompid__602", "share_mid", "anonymousState__temp2", "anonymousState__temp3", "anonymousState__temp4", "tabBar__temp", "pagePath__temp", "member_info", "dispatch", "group_team_detail"];
  static privateTaroEvent = [];

  _constructor(props) {
    super._constructor(props);

    this.$$refs = [];
  }

  config = {
    navigationBarTitleText: '团购详情'
  };

  state = {
    share_mid: 0 // 分享进来


    // 这里分享一个share_mid 过去
  };$setSharePath = () => {
    const { memberInfo } = this.props;
    const { params = {} } = this.$router;
    const currentPage = getCurrentPagePath();
    return currentPage + "?team_id=" + params.team_id + "&share_mid=" + memberInfo.id;
  };

  $setShareTitle = () => {
    return this.config.navigationBarTitleText;
  };

  $setShareDesc = () => {
    return '小伙伴们快加入我的团购吧！';
  };

  $setShareImageUrl = () => {
    return '';
  };

  componentDidMount() {
    const params = this.$router.params;
    this.setState({
      share_mid: params.share_mid ? params.share_mid : 0,
      team_id: params.team_id ? params.team_id : 0
    }, () => {
      this.getTeamDetail();
    });
  }

  getTeamDetail = () => {
    showLoading();
    const { share_mid, team_id } = this.state;
    callAPI('apiGetGroupSaleTeamDetail', {
      id: team_id,
      share_mid
    }).then(result => {
      hideLoading();
      return this.props.dispatch({
        type: GROUP_SALE_DETAIL_PAGE_DATA,
        data: {
          ...result
        }
      });
    }).catch(showErrorLogin);
  };

  _createBlankData(_$uid) {
    return () => {
      const priCompid__601 = genCompid(_$uid + "priCompid__601");
      const anonymousState__temp = {
        height: 20
      };
      const tabBar__temp = {"color":"#9b9b9b","selectedColor":"#6190E8","list":[{"pagePath":"modules/shop/pages/index/index","text":"首页","iconPath":"./assets/tabs/home_default.png","selectedIconPath":"./assets/tabs/home_active.png"},{"pagePath":"modules/goods/pages/category/index","text":"分类","iconPath":"./assets/tabs/goods_default.png","selectedIconPath":"./assets/tabs/goods_active.png"},{"pagePath":"modules/member/pages/cart/index","text":"购物车","iconPath":"./assets/tabs/cart_default.png","selectedIconPath":"./assets/tabs/cart_active.png"},{"pagePath":"modules/member/pages/index/index","text":"会员中心","iconPath":"./assets/tabs/member_default.png","selectedIconPath":"./assets/tabs/member_active.png"}],"backgroundColor":"#f7f7fa","borderStyle":"white"};
      const pagePath__temp = "/modules/pintuan/pages/join/index";
      propsManager.set({
        "diyStyle": anonymousState__temp
      }, priCompid__601);
      return {
        anonymousState__temp: anonymousState__temp,
        priCompid__601: priCompid__601,
        tabBar__temp: tabBar__temp,
        pagePath__temp: pagePath__temp
      };
    };
  }

  _createData() {
    this.__state = arguments[0] || this.state || {};
    this.__props = arguments[1] || this.props || {};
    const __isRunloopRef = arguments[2];
    const __prefix = this.$prefix;
    ;
    const priCompid__602 = genCompid(__prefix + "priCompid__602");

    const { share_mid } = this.__state;
    const { group_team_detail } = this.__props;

    const anonymousState__temp2 = this._createBlankData(__prefix + "YYatrPJjbO")();

    const anonymousState__temp3 = this._createBlankData(__prefix + "CjKhSVybDv")();

    const anonymousState__temp4 = this._createBlankData(__prefix + "oxYiaANEgM")();

    const tabBar__temp = {"color":"#9b9b9b","selectedColor":"#6190E8","list":[{"pagePath":"modules/shop/pages/index/index","text":"首页","iconPath":"./assets/tabs/home_default.png","selectedIconPath":"./assets/tabs/home_active.png"},{"pagePath":"modules/goods/pages/category/index","text":"分类","iconPath":"./assets/tabs/goods_default.png","selectedIconPath":"./assets/tabs/goods_active.png"},{"pagePath":"modules/member/pages/cart/index","text":"购物车","iconPath":"./assets/tabs/cart_default.png","selectedIconPath":"./assets/tabs/cart_active.png"},{"pagePath":"modules/member/pages/index/index","text":"会员中心","iconPath":"./assets/tabs/member_default.png","selectedIconPath":"./assets/tabs/member_active.png"}],"backgroundColor":"#f7f7fa","borderStyle":"white"};
    const pagePath__temp = "/modules/pintuan/pages/join/index";
    propsManager.set({
      "title": "\u62FC\u56E2\u89C4\u5219",
      "text": group_team_detail.rule
    }, priCompid__602);
    Object.assign(this.__state, {
      priCompid__602: priCompid__602,
      anonymousState__temp2: anonymousState__temp2,
      anonymousState__temp3: anonymousState__temp3,
      anonymousState__temp4: anonymousState__temp4,
      tabBar__temp: tabBar__temp,
      pagePath__temp: pagePath__temp
    });
    return this.__state;
  }
  customComponents = ["Blank", "AtPageContainer", "JoinTeamCaptainHead", "TeamItemListBlock", "JoinTeamGroupAction", "BaseRichText"];
  static $$componentPath = "modules/pintuan/pages/join/index";

  hasComponentWillMount() {}

  componentDidShow() {
    this.__listenToSetNavigationBarEvent();
  }

  componentDidHide() {
    this.__offListenToSetNavigationBarEvent();
  }

  __listenToSetNavigationBarEvent() {
    if (!Taro.eventCenter.callbacks['TaroEvent:setNavigationBar']) {
      Taro.eventCenter.on('TaroEvent:setNavigationBar', params => {
        if (params.title) {
          this.$scope.$page.setTitleBar({
            text: params.title
          });
        }

        if (params.frontColor) {
          this.$scope.$page.setTitleBar({
            textColor: params.frontColor
          });
        }

        if (params.backgroundColor) {
          this.$scope.$page.setTitleBar({
            backgroundColor: params.backgroundColor
          });
        }
      });
    }
  }

  __offListenToSetNavigationBarEvent() {
    Taro.eventCenter.off('TaroEvent:setNavigationBar');
  }

}

export default require('../../../../npm/@tarojs/taro-quickapp/index.js').default.createComponent(Index, '/modules/pintuan/pages/join/index');
</script>

期望行为
编译无报错，跟小程序、H5表现一致

报错信息

ERROR: <template>节点里只能有一个根节点

系统信息

👽 Taro v1.3.17


  Taro CLI 1.3.17 environment info:
    System:
      OS: macOS 10.14.6
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 11.9.0 - /usr/local/bin/node
      Yarn: 1.13.0 - /usr/local/bin/yarn
      npm: 6.9.0 - /usr/local/bin/npm
    npmPackages:
      @tarojs/async-await: 1.3.17 => 1.3.17 
      @tarojs/cli: 1.3.17 => 1.3.17 
      @tarojs/components: 1.3.17 => 1.3.17 
      @tarojs/components-qa: 1.3.17 => 1.3.17 
      @tarojs/components-rn: 1.3.17 => 1.3.17 
      @tarojs/plugin-babel: 1.3.17 => 1.3.17 
      @tarojs/plugin-csso: 1.3.17 => 1.3.17 
      @tarojs/plugin-sass: 1.3.17 => 1.3.17 
      @tarojs/plugin-uglifyjs: 1.3.17 => 1.3.17 
      @tarojs/redux: 1.3.17 => 1.3.17 
      @tarojs/redux-h5: 1.3.17 => 1.3.17 
      @tarojs/rn-runner: 1.3.17 => 1.3.17 
      @tarojs/router: 1.3.17 => 1.3.17 
      @tarojs/taro: 1.3.17 => 1.3.17 
      @tarojs/taro-alipay: 1.3.17 => 1.3.17 
      @tarojs/taro-h5: 1.3.17 => 1.3.17 
      @tarojs/taro-qq: 1.3.17 => 1.3.17 
      @tarojs/taro-quickapp: 1.3.17 => 1.3.17 
      @tarojs/taro-redux-rn: 1.3.17 => 1.3.17 
      @tarojs/taro-rn: 1.3.17 => 1.3.17 
      @tarojs/taro-router-rn: 1.3.17 => 1.3.17 
      @tarojs/taro-swan: 1.3.17 => 1.3.17 
      @tarojs/taro-tt: 1.3.17 => 1.3.17 
      @tarojs/taro-weapp: 1.3.17 => 1.3.17 
      @tarojs/webpack-runner: 1.3.17 => 1.3.17 
      eslint-config-taro: 1.3.17 => 1.3.17 
      eslint-plugin-taro: 1.3.17 => 1.3.17 
      nerv-devtools: ^1.4.4 => 1.4.4 
      nervjs: ^1.4.4 => 1.4.4 
      react: 16.3.1 => 16.3.1 
      react-native: 0.55.4 => 0.55.4 
    npmGlobalPackages:
      typescript: 2.4.2

The text was updated successfully, but these errors were encountered:

taro-bot · 2019-09-03T07:50:27Z

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

Qiyu8 · 2019-09-04T01:35:49Z

这是快应用的一个限制，还有很多组件都有类似的问题，比如text、rich-text里面都是不支持子组件的，而list组件则只支持list-item子组件，可能的解决办法是在Taro里面不写template组件，因为转换为快应用之后页面会被taro-page包裹，taro-page里面就有template，一个页面只允许有一个template节点

luckyadam · 2019-09-04T02:35:03Z

这是快应用的一个限制，还有很多组件都有类似的问题，比如text、rich-text里面都是不支持子组件的，而list组件则只支持list-item子组件，可能的解决办法是在Taro里面不写template组件，因为转换为快应用之后页面会被taro-page包裹，taro-page里面就有template，一个页面只允许有一个template节点

看来要调整一下编译了，目前类中函数返回 jsx 会被编译成 template

taro-bot · 2019-09-04T02:38:58Z

CC @yuche

hujingyuki · 2020-03-04T14:51:03Z

请问这个解决了吗

Pines-Cheng added the 快应用 label Sep 4, 2019

yuche added the 编译器 label Sep 4, 2019

taro-bot bot assigned yuche Sep 4, 2019

Chen-jj added T-quickapp V-1 V-2 and removed 快应用 labels Jul 3, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[快应用] ERROR: <template>节点里只能有一个根节点 #4379

[快应用] ERROR: <template>节点里只能有一个根节点 #4379

tourze commented Sep 3, 2019

taro-bot bot commented Sep 3, 2019

Qiyu8 commented Sep 4, 2019

luckyadam commented Sep 4, 2019

taro-bot bot commented Sep 4, 2019

hujingyuki commented Mar 4, 2020

[快应用] ERROR: <template>节点里只能有一个根节点 #4379

[快应用] ERROR: <template>节点里只能有一个根节点 #4379

Comments

tourze commented Sep 3, 2019

taro-bot bot commented Sep 3, 2019

Qiyu8 commented Sep 4, 2019

luckyadam commented Sep 4, 2019

taro-bot bot commented Sep 4, 2019

hujingyuki commented Mar 4, 2020