Vite创建的React项目中react-icons报错及导航菜单渲染问题

错误原因 #

控制台提示的Uncaught SyntaxError: expected expression, got '<'，是因为**.js后缀的文件在Vite中默认不会被当作JSX文件转译**，而你在constants.js里使用了JSX语法（比如<MdHomeIcon />），导致浏览器无法解析这种非标准的JavaScript语法。

解决步骤及修正代码 #

1. 重命名常量文件 #

将constants.js改名为constants.jsx，让Vite识别并转译其中的JSX代码：

// constants.jsx
import { MdHomeIcon, MdCodeIcon } from "react-icons/md";

export const categories = [
  { name: "New", icon: <MdHomeIcon /> },
  { name: "Coding", icon: <MdCodeIcon /> },
  { name: "ReactJS", icon: <MdCodeIcon /> },
];

2. 修正Sidebar的导入路径 #

在Sidebar.jsx中更新导入路径，指向.jsx后缀的常量文件，同时给遍历的元素添加key属性（避免React的列表渲染警告）：

// Sidebar.jsx
import { categories } from "./constants.jsx";

export const Sidebar = () => (
  <div>
    {categories.map((category, index) => (
      <div key={index}>
        <span>{category.icon}</span>
        <span>{category.name}</span>
      </div>
    ))}
  </div>
);

可选：配置Vite处理.js文件中的JSX（不推荐） #

如果不想修改文件名，可以在vite.config.js中添加配置，让Vite对.js文件启用JSX转译，但这种做法不符合React项目的文件命名规范，建议优先使用重命名的方式：

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

export default defineConfig({
  plugins: [react({
    include: /\.(js|jsx)$/ // 让插件处理.js和.jsx文件
  })]
});

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