Taro将原生小程序转为H5编译失败，SyntaxError: Namespace tags are not supported. ReactJSX is not XML.

[LindaSze]

问题描述
按照官网教程，使用Taro将原生小程序转为H5，编译时报错，具体报错内容如下

./.temp/pages/self/self.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Namespace tags are not supported. ReactJSX is not XML.

  160 |               </View>
  161 |             </View>
> 162 |             <View wx:else className="l toLgin" onClick={this.bindLogin}>
      |                   ^
  163 |               立即登录
  164 |             </View>
  165 |             <Image src={utils.isNull(userInfo.headImgUrl) ? baseRes + 'self-headImg.png' : userInfo.headImgUrl} className="self-headImgBig r" onClick={this.bindSelfInfo}></Image>

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

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

1. 使用yarn安装taro，版本1.3.17
   2.执行taro convert,taroConvert目录下生成转换文件
2. taroConvert中执行yarn install获取依赖包
3. 执行yarn build:h5

期望行为
可编译通过，并转换成功，可访问

报错信息

./.temp/pages/self/self.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Namespace tags are not supported. ReactJSX is not XML.

> 162 |             <View wx:else className="l toLgin" onClick={this.bindLogin}>
      |                   ^
  163 |               立即登录
  164 |             </View>
  165 |             <Image src={utils.isNull(userInfo.headImgUrl) ? baseRes + 'self-headImg.png' : userInfo.headImgUrl} className="self-headImgBig r" onClick={this.bindSelfInfo}></Image>
error Command failed with exit code 1.

系统信息

Taro CLI 1.3.17 environment info:
System:
OS: macOS High Sierra 10.13.6
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.13.0 - /usr/local/bin/node
Yarn: 1.15.2 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
npmPackages:
@tarojs/components: 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/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-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.0 => 1.4.4
nervjs: ^1.4.0 => 1.4.4
stylelint-config-taro-rn: 1.3.17 => 1.3.17
stylelint-taro-rn: 1.3.17 => 1.3.17

补充信息
[先在官网论坛搜索过，尝试使用1.2.0版本cli，没有解决，也查看了cli和package.json的版本，是一致的；看到这个issue(https://github.com//issues/1812),报错问题是一样的，但是我这个正好和其反过来，我是从小程序到H5，所以也没看懂应该如何解决]

[taro-bot]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[yuche]

你报错原生小程序的源码提一下

[LindaSze]

这个问题已解决，原小程序代码中wx-if属于语法错误，导致没有被成功转换；修改为wx:if后得到解决；

但编译依然没成功，有一个app.scss中@import "./pages/template/noData.wxss"错误，手动改为导入noData.scss后修复

再次编译还有一个错误是原js工具类中有一个重载方法（同名不同参数量），编译提示，has already been declared，改为不同名字后编译通过；

[LindaSze]

经过以上修改可以编译成功了；新的问题变成了，打开的页面没有任何内容，报错：
Uncaught TypeError: Cannot assign to read only property 'exports' of object '#'
import和module.exports混用导致这个错误
见issue #3854

替换为export default或export，然后用import导入解决

[LindaSze]

继续出现新的问题

Refused to load the image 'http://127.0.0.1:10086/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

搜索了一下，是nodejs中这个favicon.ico图标，但不知如何下手解决

[LindaSze]

记录下吧，重新编译了一次，发现编译报错了，是上面module.exports修改导致的，修改完毕后再次编译成功，终于看到了小程序的页面，上述nodejs图片的问题也没有了，至此，第一步的转换成功
该issuse可以close掉了

[taro-bot]

Hello~

您的问题楼上已经有了确切的回答，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~