Vite-React中使用ContextAPI出现500错误及语法解析失败问题

问题根源 #

错误提示已明确指出：你在.js后缀的文件中使用了JSX语法，但Vite默认仅会解析.jsx/.tsx文件中的JSX。你的UserContext.js里包含<UserContext.Provider>这类JSX元素，因此触发了语法解析失败。

解决方案 #

1. 重命名Context文件后缀 #

将UserContext.js重命名为UserContext.jsx，这是最直接且符合React项目规范的做法。

修改后的文件结构：

src/
└── context/
    └── UserContext.jsx

2. 更新所有导入路径 #

确保所有导入UserContext的组件（比如你的Login.jsx）中，导入路径的后缀同步更新：

// Login.jsx
import { UserContext } from '../context/UserContext.jsx';

注：如果你的Vite配置中已将.jsx添加到resolve.extensions数组，也可以省略后缀，但显式写出后缀更清晰。

可选：修改Vite配置（不推荐） #

如果坚持使用.js后缀，可以在vite.config.js中配置Vite解析.js文件中的JSX：

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

export default defineConfig({
  plugins: [react({
    include: '**/*.js', // 让React插件处理所有.js文件
  })],
});

但这种做法会混淆普通JS文件和JSX文件的边界，不建议在React项目中使用。

验证修改 #

重启Vite开发服务器，此时页面应该能正常加载，UserContext的使用也不会再触发500错误。

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