@babel/plugin-transform-react-jsx doesn't work properly

[itsnoteasytonameaccount]

我的英文表述可能不太准确，见谅。
My English expression may not be accurate, thanks for understanding.

我正在尝试启动我的第一个vite-react工程，但是我发现vite无法处理带jsx语法的.js文件
I'm trying to start up my first vite-react project，but I found that vite can't resolve .js file contains jsx syntax.

因此我试着添加@babel/plugin-transform-react-jsx插件到babel配置中，但又出现了另一个报错
So I tried to add @babel/plugin-transform-react-jsx plugin to babel config, and then I got another error report:

[vite:react-babel] Duplicate plugin/preset detected.
If you'd like to use two separate instances of a plugin,
they need separate names, e.g.

  plugins: [
    ['some-plugin', {}],
    ['some-plugin', {}, 'some unique name'],
  ]

我以前使用webpack时@babel/plugin-transform-react-jsx这个插件工作得很好，而且以前也没有过这个报错，
我不想按照报错中的提示传入一个插件名，我想知道确切的报错原因。
@babel/plugin-transform-react-jsx plugin works well in webpack project and I never see this error before,
I don't want to use two separate instances of a plugin, I just want to know exactly how the error was raised, so I don't want to pass an unique name as parameter.

请问有人知道怎么解决这个问题么？非常感谢。
Does anyone knows how to resolve this? thanks.

node version: 14.18.0
vite version: 3.2.4

my vite.config.js:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        react({
            babel: {
                plugins: ['@babel/plugin-transform-react-jsx'],
            },
        }),
    ],
});

package.json

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@babel/plugin-transform-react-jsx": "^7.20.7",
    "@types/react": "^18.0.24",
    "@types/react-dom": "^18.0.8",
    "@vitejs/plugin-react": "^2.2.0",
    "vite": "^3.2.3"
  }
}

[ArnaudBarre]

In v2 plugin-transform-react-jsx is already included, that's why you get the error (in v3 this done with esbuild).

JSX requires extra parsing and transformation for tooling and the convention is to signal it with the .jsx extension. TS enforce it also it.

You should migrate your code to use .jsx extension, this would also avoid issues with other tools in the future.