在vue文件中使用jsx语法编译出错

[yangYangxs]

相关平台

H5

复现仓库

https://github.com/yangYangxs/taro-demo.git
浏览器版本: Chrome 版本 118.0.5993.89（正式版本） （64 位）
使用框架: Vue 3

复现步骤

创建项目： taro init taro-demo

1. 交互式命令行项目介绍：demo
2. 交互式命令行选择框架: vue3
3. 交互式命令行是否 typescript: n
4. 是否需要编译为 ES5: y
5. 交互式命令行选择css预处理器：sass
6. 交互式命令行选择包管理工具：npm
7. 交互式命令行选择编译工具：webpack5
8. 交互式命令行选择模板源：Gitee
9. 交互式命令行选择模板：默认模板
10. 依赖安装
11. 修改 babel.config.js

module.exports = {
  presets: [
    ['taro', {
      framework: 'vue3',
      ts: false,
      compiler: 'webpack5',
      useBuiltIns: process.env.TARO_ENV === 'h5' ? 'usage' : false,
      vueJsx:true
    }]
  ]
}

12. 修改 src/pages/index/index.vue

<script>
import { defineComponent, ref } from 'vue'
import { View } from '@tarojs/component'

export default defineComponent({
  setup() {
    const msg = ref('hello msg')
    return () => <View>{msg.value}</View>
  }
})
</script>

13. 开发调试H5 cnpm run dev:h5 编译报错
    const msg = ref('hello msg')

    return () => {msg.value}
    ^

期望结果

编译通过 并且在vue文件中能正常使用jsx语法

实际结果

const msg = ref('hello msg')

  return () => <View>{msg.value}</View>
                       ^

编译不通过

环境信息

👽 Taro v4.0.9


  Taro CLI 4.0.9 environment info:
    System:
      OS: Windows 10 10.0.19044
    Binaries:
      Node: 20.10.0 - F:\nodejs\node.EXE
      npm: 10.8.2 - F:\nodejs\npm.CMD
    npmPackages:
      @tarojs/cli: 4.0.9 => 4.0.9
      @tarojs/components: 4.0.9 => 4.0.9
      @tarojs/helper: 4.0.9 => 4.0.9
      @tarojs/plugin-framework-vue3: 4.0.9 => 4.0.9
      @tarojs/plugin-platform-alipay: 4.0.9 => 4.0.9
      @tarojs/plugin-platform-h5: 4.0.9 => 4.0.9
      @tarojs/plugin-platform-harmony-hybrid: 4.0.9 => 4.0.9 
      @tarojs/plugin-platform-jd: 4.0.9 => 4.0.9
      @tarojs/plugin-platform-qq: 4.0.9 => 4.0.9
      @tarojs/plugin-platform-swan: 4.0.9 => 4.0.9
      @tarojs/plugin-platform-tt: 4.0.9 => 4.0.9
      @tarojs/plugin-platform-weapp: 4.0.9 => 4.0.9
      @tarojs/runtime: 4.0.9 => 4.0.9
      @tarojs/shared: 4.0.9 => 4.0.9
      @tarojs/taro: 4.0.9 => 4.0.9
      @tarojs/taro-loader: 4.0.9 => 4.0.9
      @tarojs/webpack5-runner: 4.0.9 => 4.0.9
      babel-preset-taro: 4.0.9 => 4.0.9
      eslint-config-taro: 4.0.9 => 4.0.9

---

补充信息

babel