vite jsx Uncaught ReferenceError: React is not defined
Version
3.0.7
Reproduction link
https://github.com/AZmake/demo
Steps to reproduce
1、I'm create a vue3 app by vue create app
,and then I'am add "@vue/babel-plugin-jsx": "^1.0.3",
App.vue
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld title="Welcome to Your Vue.js App"/>
</template>
<script>
import HelloWorld from './components/HelloWorld'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
HelloWorld.jsx
const HelloWorld = ({
name: 'HelloWorld',
props: {
title: String
},
setup (props) {
return () => (
<div style="color:red;">{props.title}</div>
)
}
})
export default HelloWorld
the above code is running success
2、When I'am create app by yarn create @vitejs/app
,the above code shows error like this:
runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of render function
at <HelloWorld title="Welcome to Your Vue.js App" >
at <App>
Uncaught ReferenceError: React is not defined
at Proxy.<anonymous> (helloWorld.jsx:8)
at renderComponentRoot (runtime-core.esm-bundler.js:732)
at componentEffect (runtime-core.esm-bundler.js:4225)
at reactiveEffect (reactivity.esm-bundler.js:42)
at effect (reactivity.esm-bundler.js:17)
at setupRenderEffect (runtime-core.esm-bundler.js:4208)
at mountComponent (runtime-core.esm-bundler.js:4167)
at processComponent (runtime-core.esm-bundler.js:4127)
at patch (runtime-core.esm-bundler.js:3745)
at mountChildren (runtime-core.esm-bundler.js:3927)
So , what is the problem?
What is expected?
render success
What is actually happening?
Uncaught ReferenceError: React is not defined
This repository is for Vue 3, not Vite's Vue integration. Please open an issue there.
as a hint: You likely didn't configure the JSX options in Vite correctly, and so the compiler inserts the default JSX pragma, which imports Reacts
Thanks, and I found solution in this vite2 vue jsx