vue3中使用jsx报错React is not defined和h is not defined

js项目中jsx的使用

1. js项目引入Vue 3 Babel JSX 插件
2. 修改vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuejsx from "@vue/babel-plugin-jsx"
import path from "path"
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),vuejsx({})],
  resolve:{
    alias:{
      "@": `${path.resolve(__dirname, './src')}`
    }
  },
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment',
    jsxInject: "import { h } from 'vue';"
  }
})

这样的话就不会出现React is not defined和h is not defined这两个错误。

3. 下面是vite官方关于使用jsx的表述：

关键问题就是在这里，我到底是不是vue用户？vue用户应该不需要再做其他的配置了，有点懵逼。

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment'
  }
})

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  esbuild: {
    jsxInject: `import React from 'react'`
  }
})	

4. 支持的用法

就是必须导出，必须用defineComponent 这两点

import { defineComponent } from 'vue'

// named exports w/ variable declaration: ok
export const Foo = defineComponent({})

// named exports referencing variable declaration: ok
const Bar = defineComponent({ render() { return <div>Test</div> }})
export { Bar }

// default export call: ok
export default defineComponent({ render() { return <div>Test</div> }})

// default export referencing variable declaration: ok
const Baz = defineComponent({ render() { return <div>Test</div> }})
export default Baz

Non-supported patterns

// not using `defineComponent` call
export const Bar = { ... }

// not exported
const Foo = defineComponent(...)

ts项目引入插件后不需要其他配置