vuejs/create-vue doesn't support JSX even after you selected "Add JSX Support"-CodePudding

I created new Vue project using create-vue command as it was written here. Here are my answers to questions:

D:\checks>npm init vue@latest

Vue.js - The Progressive JavaScript Framework

√ Project name: ... VueQuestionJSX
√ Package name: ... vuequestionjsx
√ Add TypeScript? ... No
√ Add JSX Support? ... Yes
√ Add Vue Router for Single Page Application development? ... Yes
√ Add Pinia for state management? ... Yes
√ Add Vitest for Unit Testing? ... Yes
√ Add Cypress for End-to-End testing? ... Yes
√ Add ESLint for code quality? ... Yes
√ Add Prettier for code formatting? ... Yes

Scaffolding project in D:\checks\VueQuestionJSX...

Done. Now run

I have not changed any settings in project. I just added simple JSX variable in script

const textDiv = <div>Hi all!</div>;

and decided to check how it works. It didn't. First of all ESlint showed an error Parsing error: Unexpected token <. Then compiler threw an error

[vite] Internal server error: Failed to parse source for import analysis because the content
contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
  Plugin: vite:import-analysis

I checked readme for @vitejs/plugin-vue-jsx and noticed it seems it doesn't understand this usual syntax. First of all component which contains JSX must be exported, and second it must use defineComponent function.
I created a separate file CheckJSX.vue. Here is the whole its content:

CheckJSX.js

import { defineComponent } from "vue";

const Bar = defineComponent({
  render() {
    return <div>Test</div>;
  },
});

export { Bar };

As defineComponent returns Vue Component I inserted Bar as component

HomeView.vue

<script setup>
  import { Bar } from "@/components/CheckJSX.js";
</script>

<template>
  <Bar />
</template>

ESlint was in shock of this syntax and highlighted everything in red. Probably it didn't like .vue extension. I changed it to .js. ESLint calmed down but still showed an error Parsing error: Unexpected token <.
Compiler threw an error

20:56:29 [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
  Plugin: vite:import-analysis
  File: D:/checks/VueQuestionJSX/src/components/CheckJSX.js
  4  |    render() {
  5  |      return <div>Test</div>;
  6  |    },
     |     ^
  7  |  });

Why Vue doesn't understand JSX out of the box even if you chose "Add JSX support"?

CodePudding user response：

A workaround is to enable JSX parsing in the ESLint config:

// .eslintrc.cjs
module.exports = {
  ⋮
  "parserOptions": {
    ⋮
    "ecmaFeatures": {
      "jsx": true,
    }
  }
}

I think this is a new bug because JSX worked previously for me out of the box in a newly scaffolded project. I recommend filing a GitHub issue to get it fixed.