Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
yangYangxs opened this issue Feb 11, 2025 · 0 comments
Closed

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

yangYangxs opened this issue Feb 11, 2025 · 0 comments

Comments

@yangYangxs
Copy link

相关平台

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
    }]
  ]
}
  1. 修改 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>
  1. 开发调试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

This was referenced Feb 15, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant