$ 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)
Describe the bug
From scratch:
Expected behavior
Just works with JSX.
How to reproduce
Use create-vue@3.11.1. See above