编译失败，SyntaxError: unknown: Namespace tags are not supported. ReactJSX is not XML.

[h2oiswater]

问题描述
项目从taro 1.0.7升级到taro 1.2.4后，编译小程序时报错,如下图

对应的代码是使用逻辑符号来进行条件渲染

复现步骤
[复现问题的步骤]

1. 代码里编写逻辑符号的条件渲染语句

2. 编译小程序

期望行为
正常编译

报错信息

系统信息

Taro CLI 1.2.4 environment info:
    System:
      OS: macOS 10.14.2
      Shell: 5.6.2 - /usr/local/bin/zsh
    Binaries:
      Node: 10.12.0 - ~/.nvm/versions/node/v10.12.0/bin/node
      Yarn: 1.12.3 - /usr/local/bin/yarn
      npm: 6.4.1 - ~/.nvm/versions/node/v10.12.0/bin/npm
    npmPackages:
      @tarojs/async-await: 1.2.4 => 1.2.4
      @tarojs/components: 1.2.4 => 1.2.4
      @tarojs/plugin-babel: 1.2.4 => 1.2.4
      @tarojs/plugin-csso: 1.2.4 => 1.2.4
      @tarojs/plugin-sass: 1.2.4 => 1.2.4
      @tarojs/plugin-stylus: 1.2.4 => 1.2.4
      @tarojs/plugin-uglifyjs: 1.2.4 => 1.2.4
      @tarojs/redux: 1.2.4 => 1.2.4
      @tarojs/redux-h5: 1.2.4 => 1.2.4
      @tarojs/router: 1.2.4 => 1.2.4
      @tarojs/taro: 1.2.4 => 1.2.4
      @tarojs/taro-h5: 1.2.4 => 1.2.4
      @tarojs/taro-weapp: 1.2.4 => 1.2.4
      @tarojs/webpack-runner: 1.2.4 => 1.2.4
      eslint-config-taro: 1.2.4 => 1.2.4
      eslint-plugin-taro: 1.2.4 => 1.2.4

补充信息
尝试把逻辑符号条件渲染改成元素变量形式，可以编译通过，但是运行后报以下错误

1. React is undefined
2. page not found（1.没有注册页面 2.在异步方法中调用跳转）

检查了代码，注册了页面，跳转方法也是在同步的方法中调用的，但是就是无法显示页面

[taro-bot]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[yuche]

贴文字，不要贴截图

[taro-bot]

CC @yuche

[h2oiswater]

编译报错文字

错误  页面编译  页面/Users/nova/Documents/nova-project/BJX_Wechat/src/pages/index/index编译失败！
{ SyntaxError: unknown: Namespace tags are not supported. ReactJSX is not XML.
   6 |           </View>
   7 |           <View style={"padding-top: " + system.barHeight + "px"} className="all-content">
>  8 |             {<block wx:if={this.state.transX !== -80}><View className="cover" bindtap="clickCloseMenu" data-e-tap-so="this" /></block>}
     |                     ^
   9 |             <AtNavBar
  10 |       // onClickRgIconSt={this.handleClick}
  11 |       // onClickRgIconNd={this.handleClick}
    at File.buildCodeFrameError (/Users/nova/Documents/nova-project/BJX_Wechat/node_modules/babel-core/lib/transformation/file/index.js:427:15)
    at NodePath.buildCodeFrameError (/Users/nova/Documents/nova-project/BJX_Wechat/node_modules/babel-traverse/lib/path/index.js:140:26)
    at PluginPass.visitor.JSXNamespacedName (/Users/nova/.nvm/versions/node/v10.12.0/lib/node_modules/@tarojs/cli/node_modules/babel-helper-builder-react-jsx/lib/index.js:9:16)
    at newFn (/Users/nova/Documents/nova-project/BJX_Wechat/node_modules/babel-traverse/lib/visitors.js:276:21)
    at NodePath._call (/Users/nova/Documents/nova-project/BJX_Wechat/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (/Users/nova/Documents/nova-project/BJX_Wechat/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (/Users/nova/Documents/nova-project/BJX_Wechat/node_modules/babel-traverse/lib/path/context.js:105:12)
    at TraversalContext.visitQueue (/Users/nova/Documents/nova-project/BJX_Wechat/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitSingle (/Users/nova/Documents/nova-project/BJX_Wechat/node_modules/babel-traverse/lib/context.js:108:19)
    at TraversalContext.visit (/Users/nova/Documents/nova-project/BJX_Wechat/node_modules/babel-traverse/lib/context.js:192:19)
  loc: Position { line: 8, column: 20 },
  _babel: true,
  codeFrame:
   '\u001b[0m \u001b[90m  6 | \u001b[39m          \u001b[33m<\u001b[39m\u001b[33m/\u001b[39m\u001b[33mView\u001b[39m\u001b[33m>\u001b[39m\n \u001b[90m  7 | \u001b[39m          \u001b[33m<\u001b[39m\u001b[33mView\u001b[39m style\u001b[33m=\u001b[39m{\u001b[32m"padding-top: "\u001b[39m \u001b[33m+\u001b[39m system\u001b[33m.\u001b[39mbarHeight \u001b[33m+\u001b[39m \u001b[32m"px"\u001b[39m} className\u001b[33m=\u001b[39m\u001b[32m"all-content"\u001b[39m\u001b[33m>\u001b[39m\n\u001b[31m\u001b[1m>\u001b[22m\u001b[39m\u001b[90m  8 | \u001b[39m            {\u001b[33m<\u001b[39m\u001b[33mblock\u001b[39m wx\u001b[33m:\u001b[39m\u001b[36mif\u001b[39m\u001b[33m=\u001b[39m{\u001b[36mthis\u001b[39m\u001b[33m.\u001b[39mstate\u001b[33m.\u001b[39mtransX \u001b[33m!==\u001b[39m \u001b[33m-\u001b[39m\u001b[35m80\u001b[39m}\u001b[33m>\u001b[39m\u001b[33m<\u001b[39m\u001b[33mView\u001b[39m className\u001b[33m=\u001b[39m\u001b[32m"cover"\u001b[39m bindtap\u001b[33m=\u001b[39m\u001b[32m"clickCloseMenu"\u001b[39m data\u001b[33m-\u001b[39me\u001b[33m-\u001b[39mtap\u001b[33m-\u001b[39mso\u001b[33m=\u001b[39m\u001b[32m"this"\u001b[39m \u001b[33m/\u001b[39m\u001b[33m>\u001b[39m\u001b[33m<\u001b[39m\u001b[33m/\u001b[39m\u001b[33mblock\u001b[39m\u001b[33m>\u001b[39m}\n \u001b[90m    | \u001b[39m                    \u001b[31m\u001b[1m^\u001b[22m\u001b[39m\n \u001b[90m  9 | \u001b[39m            \u001b[33m<\u001b[39m\u001b[33mAtNavBar\u001b[39m\n \u001b[90m 10 | \u001b[39m      \u001b[90m// onClickRgIconSt={this.handleClick}\u001b[39m\n \u001b[90m 11 | \u001b[39m      \u001b[90m// onClickRgIconNd={this.handleClick}\u001b[39m\u001b[0m' }

[h2oiswater]

代码截图文字

 {this.state.transX !== -80 && (
              <View
                className="cover"
                onClick={this.clickCloseMenu.bind(this)}
              />
            )}

[yuche]

单独这段代码粘贴过去没能复现，可能你要贴整个 render 函数的代码了。

[h2oiswater]

整段render是这样的，希望能帮助排查

render() {
    // let { current } = this.state
    let { system, user, models } = this.props
    let currentPage = models.selectCategory.row
    return (
      <View style={{ height: `${system.screenHeight}px`, overflow: 'hidden' }}>
        <View
          className="all"
          style={{ transform: `translateX(${this.state.transX}vw)` }}
        >
          <View className="all-side-nav">
            <NavContent
              menuList={Index.menuList}
              userIcon={user.user ? user.user.avatar : ''}
              userName={user.user ? user.user.name : ''}
              paddingTop={system.barHeight}
              onBack={this.clickCloseMenu.bind(this)}
              onSelectMenuList={this.selectMenuList.bind(this)}
            />
          </View>
          <View
            style={`padding-top: ${system.barHeight}px`}
            className="all-content"
          >
            {this.state.transX !== -80 && (
              <View
                className="cover"
                onClick={this.clickCloseMenu.bind(this)}
              />
            )}
            <AtNavBar
              // onClickRgIconSt={this.handleClick}
              // onClickRgIconNd={this.handleClick}
              onClickLeftIcon={this.clickOpenMenu.bind(this)}
              leftIconType="menu"
              color="#000"
              title="保交行"
            />
            <MyNav
              carCateList={models.menuList!}
              currentSelect={models.selectCategory}
              onSelectTravelMode={this.selectTravelMode.bind(this)}
            />
            {currentPage === 0 && (
              <Taxi ref={this.refTaxi} isShowMap={this.state.showMap} />
            )}
            {currentPage === 1 && <IntercityCar />}
          </View>
        </View>
      </View>
    )
  }

[yuche]

这样也不能复现，你也试试开一个新的文件只有 render 函数和类试试能复现吗？

[h2oiswater]

我使用taro init生成了新项目，在render中尝试 逻辑运算符的条件渲染

render() {
    const condition = false;
    return (
      <View className="index">
        <Button className="add_btn" onClick={this.props.add}>
          +
        </Button>
        <Button className="dec_btn" onClick={this.props.dec}>
          -
        </Button>
        <Button className="dec_btn" onClick={this.props.asyncAdd}>
          async
        </Button>
        <View>
          <Text>{this.props.counter.num}</Text>
        </View>
        {condition && (
          <View>
            <Text>Hello, World</Text>
          </View>
        )}
      </View>
    );
  }

实际效果如下，taro并没有正确的跳过false，而是把false渲染出来了

和文档中描述不一样

如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，Taro 会忽略并跳过它。

这导致我们的项目升级taro后，需要手动把所有的条件渲染从JSX中改为元素变量的实现方式，目前挪了一些界面，这些界面均正常显示了，但是仍有很多界面需要改动，所以希望taro官方团队能看下是否有其他解决方式。

[yuche]

@h2oiswater 你这个问题其实有点像
#869
没有意义条件判断会被删除，如果你的 condition 不是确定的值那就不会出现这样的情况。

还是你一开始提的问题，得做一个复现。

[yuche]

是不是你在 JSX 中使用了 // 来注释？

[h2oiswater]

yeah

1. 删掉 // 注释
2. static的常量改为成员变量
   后 OK了 感谢！