Vue3 中使用 jsx 语法，报错：ReferenceError: React is not defined

相关代码

<script setup lang="jsx">
const renderMask = () => (
    <div
        style={{
          background: 'rgba(0,0,0,.4)',
          color: '#fff',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
    >
      预览
    </div>
);
</script>

解决方法

package.json中添加plugin-vue-jsx插件

"devDependencies": {
  "@vitejs/plugin-vue": "^5.2.3",
  "@vitejs/plugin-vue-jsx": "^5.0.1",
}

vite.config.js中导入vueJsx，plugins中配置vueJsx()

import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  base: '/mysit',
  build: {
    outDir: 'dist'
  },
  plugins: [
    vue(),
    vueDevTools(),
    vueJsx(),
  ],
})