Subscribe on changes!

vite jsx Uncaught ReferenceError: React is not defined

avatar
Mar 25th 2021

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

avatar
Mar 25th 2021

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

avatar
Mar 26th 2021

Thanks, and I found solution in this vite2 vue jsx