Vite + React项目无法渲染，报SyntaxError语法错误求助

问题重现 #

通过npm create vite@latest初始化Vite + React模板项目，启动开发服务器后，页面仅显示标题为“Vite + React”的HTML文件及根元素，JSX无法渲染，控制台报错：

main.jsx:6 Uncaught SyntaxError: Unexpected token '<' (at main.jsx:6:61)

涉及的main.jsx代码：

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

解决方案 #

• 检查文件扩展名：确保所有包含JSX语法的文件（包括App.jsx）使用.jsx或.tsx扩展名，Vite默认不会解析.js文件中的JSX语法。
• 验证Vite配置：确认vite.config.js中正确引入了React插件，配置内容应如下：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()],
  })
  

  如果插件缺失，先执行安装命令：npm install @vitejs/plugin-react --save-dev
• 重新安装依赖并重启服务：执行npm install确保依赖完整，停止当前开发服务器后，重新运行npm run dev。
• 检查index.html的script标签：确认引入main.jsx的script标签带有type="module"属性，正确写法：

  <script type="module" src="/src/main.jsx"></script>
  

内容的提问来源于stack exchange，提问作者Dev Insane