vuejs/create-vue не поддерживает JSX даже после того, как вы выбрали «Добавить поддержку JSX».

Question

Я создал новый проект Vue, используяcreate-vueкоманда, как было написано здесь. Вот мои ответы на вопросы:

      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

Я не менял никаких настроек в проекте. Я просто добавил простую переменную JSX вscript

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

и решил проверить как он работает. Это не так. Прежде всего ESlint показал ошибку. Затем компилятор выдал ошибку

      [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

я проверил ридми на@vitejs/plugin-vue-jsxи заметил, что кажется, что он не понимает этот обычный синтаксис. Во-первых, компонент, содержащий JSX, должен быть экспортирован, а во-вторых, он должен использовать функцию.
я создал отдельный файлCheckJSX.vue. Вот все его содержание:

CheckJSX.js

      import { defineComponent } from "vue";

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

export { Bar };

КакdefineComponentвозвращает компонент Vue, который я вставилBarкак компонент

HomeView.vue

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

<template>
  <Bar />
</template>

ESlint был в шоке от такого синтаксиса и выделил все красным. Наверное не понравилось.vueрасширение. я изменил его на.js. ESLint успокоился, но все равно показывал ошибкуParsing error: Unexpected token <.
Компилятор выдал ошибку

      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  |  });

Почему Vue не понимает JSX «из коробки», даже если вы выбрали «Добавить поддержку JSX»?