I use JSX
extensively to customize Naive-UI
library elements. But after migrating from VueCLI
to create-vue
, I noticed it looks like create-vue
doesn't understand JSX in .vue
file at all. For example it throws Uncaught SyntaxError: Unexpected token '<'
for this:
const x = <div>Hi all</div>;
But VueCLI does understand... So the question is:
How to make create-vue
parse JSX
without problems (as VueCLI
does)?
PS. Here is vite.config.js
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), vueJsx()],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
});
To use JSX in
.vue
files, make sure to use<script lang="jsx">
(or "tsx" if using TypeScript)