vue3 vite 支持jsx(tsx)配置 test.tsx:6 Uncaught ReferenceError: React is not defined

在vue3+vite项目中，加入了tsx或者jsx文件，这种写法会报错 Uncaught ReferenceError: React is not defined

添加tsx

import { defineComponent } from "vue";

const Test = defineComponent({
  setup() {
    return () => (
      <>
        <div>test</div>
      </>
    );
  },
});

export default Test;

然后再单页面组件中引用，

<script setup lang="ts">
import Test from "@/utils/test";
</script>

<template>
  <Test />
  <router-view></router-view>
</template>

<style scoped></style>

接着就报了一个错

大体的意思就是说 react这个没有定义。原因在于vite对jsx不支持，没有引用任何关于jsx或者tsx这种写法的东西进去。白话来讲就是，需要有另外的东西来支持tsx或者jsx这种写法。

vite官网

文档上有写到 Vue3 jsx support via @vitejs/plugin-vue-jsx。意思是vue3的jsx通过@vitejs/plugin-vue-jsx这个库来实现。

github

链接

// vite.config.js
import vueJsx from '@vitejs/plugin-vue-jsx'

export default {
  plugins: [
    vueJsx({
      // 一些选项 也可以不写
    })
  ]
}

解决

通过以上的分析，我们知道可以通过yarn add @vitejs/plugin-vue-jsx

然后在vite.config.js里面配置一下就可以支持了

import vueJsx from "@vitejs/plugin-vue-jsx";
export default defineConfig({
  plugins: [
      vue(),
      vueJsx()
  ],
})

这样就可以解决vue3+vite，如果项目中需要添加jsx或者tsx文件报错的这个问题。