I'm unable to get JSX working in the official Vue3/Vite/JSX scaffold. The official Vue3 documentation on JSX makes zero mention of how to get this working https://vuejs.org/guide/extras/render-function.html

These are the steps I've taken

1. Scaffold the project with npm init vue@latest
   
   • Answer YES to Add JSX Support?.
     
   • Answer NO to everything else.
2. Change App.vue so that it uses a JSX render() function instead of <template>

// App.vue

<script>
export default {
  render() {
    return (
      <div>
        Hello world.
      </div>
    );
  }
}
</script>

3. Run npm run dev, giving me the following error

X [ERROR] The JSX syntax extension is not currently enabled

    html:.../src/App.vue:8:6:
      8 │       <div>
        ╵       ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

4. Add esbuild: { loader: { '.js': '.jsx' } } to vite.config.js

// vite.config.js

import { fileURLToPath, URL } from 'url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.declsv/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  esbuild: { loader: { '.js': '.jsx' } } // <--- Added this line
})

5. Run npm run dev again. Exact same error as in step 3.

CodePudding user response：

I think the problem is in the format of your component. Check the github page of the plugin-vue-jsx which provides JSX support for Vue in Vite

Supported patterns:

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(...)

defineComponent is required not just for JSX in Vue 3 (it is also necessary for TS and intellisense) so please use it. And remove the changes of vite.config.js - they are not needed

Also do not forget to specify correct lang attribute inside .vue files:

• <script lang="jsx"> for pure JS JSX
• <script lang="tsx"> for TS TSX

Working demo

CodePudding user response：

I did it like this:

vite.config.ts:

import { defineConfig } from 'vite'
import tsConfigPaths from 'vite-tsconfig-paths'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [
    tsConfigPaths(),
    vueJsx()
  ]
})

App.tsx:

function render() {
  return <div>hello</div>
}

export default render

main.ts:

import { createApp } from 'vue'
import App from './App'

createApp(App).mount('#app')