JSX Support doesn't work in create-vue@3.11.1

[sgpinkus]

Describe the bug

From scratch:

$ npm create vue@latest

> npx
> create-vue


Vue.js - The Progressive JavaScript Framework

✔ Project name: … vue-project
✔ Add TypeScript? … No / __Yes__
✔ Add JSX Support? … No / __Yes__
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / __Yes__
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in /home/node/vue-project...

Done. Now run:

  cd vue-project
  npm install
  npm run dev

$ cd vue-project/
$ npm i 

added 249 packages, and audited 250 packages in 34s

50 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
$ cat > src/App.vue <<EOF
<script>
export default {
  name: 'App',
  render() {
    return (
      <div>
        <h1>Hello from JSX in Vue!</h1>
        <p>This is JSX in a Vue component's render function!</p>
        <button onClick={() => alert('Button clicked!')}>Click me</button>
      </div>
    );
  }
};
</script>

<template>
  <div id="app"></div>
</template>
EOF
$ npm run dev

> vue-project@0.0.0 dev
> vite

Port 5173 is in use, trying another one...

  VITE v5.4.9  ready in 285 ms

  ➜  Local:   http://localhost:5174/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
Error:   Failed to scan for dependencies from entries:
  /home/node/index.html

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

    script:/home/node/src/App.vue?id=0:6:6:
      6 │       <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.


    at failureErrorWithLog (/home/node/node_modules/esbuild/lib/main.js:1472:15)
    at /home/node/node_modules/esbuild/lib/main.js:945:25
    at runOnEndCallbacks (/home/node/node_modules/esbuild/lib/main.js:1315:45)
    at buildResponseToResult (/home/node/node_modules/esbuild/lib/main.js:943:7)
    at /home/node/node_modules/esbuild/lib/main.js:955:9
    at new Promise (<anonymous>)
    at requestCallbacks.on-end (/home/node/node_modules/esbuild/lib/main.js:954:54)
    at handleRequest (/home/node/node_modules/esbuild/lib/main.js:647:17)
    at handleIncomingPacket (/home/node/node_modules/esbuild/lib/main.js:672:7)
    at Socket.readFromStdout (/home/node/node_modules/esbuild/lib/main.js:600:7)

Expected behavior

Just works with JSX.

How to reproduce

Use create-vue@3.11.1. See above

[sgpinkus]

Actually it does work. I got that code snippet from ChatGPT and it's wrong. Using setup with <script setup lang="tsx"> works.