无法在vue2.7的setup中使用jsx

wehuss commented 1 year ago

插件版本:

"@vue/babel-helper-vue-jsx-merge-props": "^1.2.1"
"@vue/babel-preset-jsx": "^1.3.0"

vue版本:2.7.4

babel配置如下:

// babel.config.js
module.exports = {
  presets: [
    ['@vue/babel-preset-jsx', { compositionAPI: true,injectH:false }],
  ],
  plugins:[['@babel/plugin-transform-typescript', { isTSX: true }]],
}
// index.tsx
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    return () => <div>testtttttttt</div>
  },
})

错误信息:

wehuss commented 1 year ago

暂时先这样解决了

jetBn commented 1 year ago

能获取到ref 吗？

jetBn commented 1 year ago

使用了jsx setup 中返回元素使用ref获取不到dom啥原因？

wehuss commented 1 year ago

@vue/cli-plugin-babel版本问题

emosheeep commented 1 year ago

具体要用哪个版本呀

wehuss commented 1 year ago

具体要用哪个版本呀

vue2.7中直接用最新版即可。但如果在babel中使用了@vue/cli-plugin-babel/preset且@vue/cli-plugin-babel版本低于小于5.0.8的话则需要将@vue/cli-plugin-babel/preset配置中的jsx选项关闭

emosheeep commented 1 year ago

具体要用哪个版本呀

vue2.7中直接用最新版即可。但如果在babel中使用了@vue/cli-plugin-babel/preset且@vue/cli-plugin-babel版本低于小于5.0.8的话则需要将@vue/cli-plugin-babel/preset配置中的jsx选项关闭

绝了，确实是这样，然后我们工作环境在pnpm的monorepo中，即便更新@vue/cli-plugin-babel插件到5.0.8版本可能也会有些奇怪的问题，索性像你这样，自己安装@vue/babel-preset-jsx到1.3.1然后手动配置compositionAPI。谢了老哥。

agileago commented 1 year ago

为啥关闭issue了？有同样问题

wehuss commented 1 year ago

为啥关闭issue了？有同样问题

看我上面的回复

kunl commented 1 year ago

    "vite": "^3.0.0"
  "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
    "@vue/babel-preset-jsx": "^1.3.1",  
    "@vitejs/plugin-vue2": "^1.1.2",
    "@vue/cli-plugin-babel": "^5.0.8",

presets: [
    ['@vue/cli-plugin-babel/preset', { jsx: false }],
    ['@vue/babel-preset-jsx', { compositionAPI: true }]
  ],

并没有解决啊

emosheeep commented 1 year ago

 "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
   "@vue/babel-preset-jsx": "^1.3.1",  
   "@vitejs/plugin-vue2": "^1.1.2",
   "@vue/cli-plugin-babel": "^5.0.8",

presets: [
   ['@vue/cli-plugin-babel/preset', { jsx: false }],
   ['@vue/babel-preset-jsx', { compositionAPI: true }]
 ],

并没有解决啊

我们的问题不一样，你这个是另外的问题了，话说你都用vite了，还用啥babel，直接用@vitejs/plugin-vue2-jsx就可以了哇

kunl commented 1 year ago

@1446445040 我这是 vite 开发， cli 打包。明天我再试试吧。

 "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
   "@vue/babel-preset-jsx": "^1.3.1",  
   "@vitejs/plugin-vue2": "^1.1.2",
   "@vue/cli-plugin-babel": "^5.0.8",

presets: [
   ['@vue/cli-plugin-babel/preset', { jsx: false }],
   ['@vue/babel-preset-jsx', { compositionAPI: true }]
 ],
并没有解决啊
我们的问题不一样，你这个是另外的问题了，话说你都用vite了，还用啥babel，直接用@vitejs/plugin-vue2-jsx就可以了哇

xiangtaot commented 1 year ago

@1446445040 我这是vite开发，cli打包。明天我再试吧。
 "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
   "@vue/babel-preset-jsx": "^1.3.1",  
   "@vitejs/plugin-vue2": "^1.1.2",
   "@vue/cli-plugin-babel": "^5.0.8",

presets: [
   ['@vue/cli-plugin-babel/preset', { jsx: false }],
   ['@vue/babel-preset-jsx', { compositionAPI: true }]
 ],
并没有解决办法啊
我们的问题不一样，你这个是另外的问题了，说你都用vite了，还用啥babel，直接接用@vitejs/plugin-vue2-jsx就可以了哇
   "vite": "^3.0.0"
 "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
   "@vue/babel-preset-jsx": "^1.3.1",  
   "@vitejs/plugin-vue2": "^1.1.2",
   "@vue/cli-plugin-babel": "^5.0.8",

presets: [
   ['@vue/cli-plugin-babel/preset', { jsx: false }],
   ['@vue/babel-preset-jsx', { compositionAPI: true }]
 ],
并没有解决办法啊vite不是有专门解析jsx的插件@vitejs/plugin-vue-jsx

Dinert commented 4 months ago

看一下这个能不能帮到你们：https://juejin.cn/post/7342420969875210291

zhao-yi-fan commented 2 months ago

大佬们，有见过这个报错吗？使用的vue 2.7.16 vue-cli4 用的setup中写jsx语法 Cannot read properties of undefined (reading 'body')

<template>
  <Form
    ref="form"
    v-model="dialogFormData"
    :formItemList="formItemList()"
  />
</template>
<script setup>
import {ref} from 'vue'

const dialogFormData = ref({})

const formItemList = () => {
  return [
    {
      prop: 'xxx',
      label: 'xxx',
      render: () => {
        return (
          <Select
            vModel={dialogFormData.value.countryCode}
            on={{
              change: Change,
            }}
          ></Select>
        )
      },
    }
 ]
}

const Change = () => {}
</script>

    "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
    "@vue/babel-preset-jsx": "^1.4.0",
    "@vue/cli-plugin-babel": "^4.5.19",
    "@vue/cli-plugin-eslint": "^4.5.19",
    "@vue/cli-plugin-router": "^4.5.19",
    "@vue/cli-plugin-vuex": "^4.5.19",
    "@vue/cli-service": "^4.5.19",
    "vue": "^2.7.16",

babel.config.js

presets: [
    ['@vue/cli-plugin-babel/preset', { jsx: false }],
    ['@vue/babel-preset-jsx', { compositionAPI: true }],
  ],

guohuihot commented 2 months ago

大佬们，有见过这个报错吗？使用的vue 2.7.16 vue-cli4 用的setup中写jsx语法 Cannot read properties of undefined (reading 'body')

<template>
  <Form
    ref="form"
    v-model="dialogFormData"
    :formItemList="formItemList()"
  />
</template>
<script setup>
import {ref} from 'vue'

const dialogFormData = ref({})

const formItemList = () => {
  return [
    {
      prop: 'xxx',
      label: 'xxx',
      render: () => {
        return (
          <Select
            vModel={dialogFormData.value.countryCode}
            on={{
              change: Change,
            }}
          ></Select>
        )
      },
    }
 ]
}

const Change = () => {}
</script>

    "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
    "@vue/babel-preset-jsx": "^1.4.0",
    "@vue/cli-plugin-babel": "^4.5.19",
    "@vue/cli-plugin-eslint": "^4.5.19",
    "@vue/cli-plugin-router": "^4.5.19",
    "@vue/cli-plugin-vuex": "^4.5.19",
    "@vue/cli-service": "^4.5.19",
    "vue": "^2.7.16",

babel.config.js

presets: [
    ['@vue/cli-plugin-babel/preset', { jsx: false }],
    ['@vue/babel-preset-jsx', { compositionAPI: true }],
  ],

不要用vModel，改为value + onInput

zhao-yi-fan commented 2 months ago

大佬们，有见过这个报错吗？使用的vue 2.7.16 vue-cli4 用的setup中写jsx语法 Cannot read properties of undefined (reading 'body')

<template>
  <Form
    ref="form"
    v-model="dialogFormData"
    :formItemList="formItemList()"
  />
</template>
<script setup>
import {ref} from 'vue'

const dialogFormData = ref({})

const formItemList = () => {
  return [
    {
      prop: 'xxx',
      label: 'xxx',
      render: () => {
        return (
          <Select
            vModel={dialogFormData.value.countryCode}
            on={{
              change: Change,
            }}
          ></Select>
        )
      },
    }
 ]
}

const Change = () => {}
</script>

    "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
    "@vue/babel-preset-jsx": "^1.4.0",
    "@vue/cli-plugin-babel": "^4.5.19",
    "@vue/cli-plugin-eslint": "^4.5.19",
    "@vue/cli-plugin-router": "^4.5.19",
    "@vue/cli-plugin-vuex": "^4.5.19",
    "@vue/cli-service": "^4.5.19",
    "vue": "^2.7.16",

babel.config.js

presets: [
    ['@vue/cli-plugin-babel/preset', { jsx: false }],
    ['@vue/babel-preset-jsx', { compositionAPI: true }],
  ],

不要用vModel，改为value + onInput

大佬牛啊👍，确实因为是vModel的问题，拆成value input就可以了。困扰了我一个星期了，还以为是配置的问题。

vuejs / jsx-vue2

无法在vue2.7的setup中使用jsx #287