React+Vite项目constants.js遇Unexpected token '<'语法错误求助

错误原因 #

你遇到的语法错误是因为在constants.js和Sidebar.jsx中错误使用了HTML转义字符<和>来代替JSX语法的<和>。Vite解析JavaScript/JSX文件时，无法识别这些转义字符作为JSX标签，从而抛出语法错误。

修正步骤 #

1. 修正constants.js中的代码
   将数组里的<和>替换为正常的<和>：

   import MusicNoteIcon from '@mui/icons-material/MusicNote';
   import HomeIcon from '@mui/icons-material/Home';
   import CodeIcon from '@mui/icons-material/Code';
   
   export const categories = [
     { name: 'New', icon: <HomeIcon /> },
     { name: 'JS Mastery', icon: <CodeIcon /> },
     { name: 'Music', icon: <MusicNoteIcon /> },
   ];
   

2. 修正Sidebar.jsx中的遍历代码
   同样替换转义字符为正常的JSX语法：

   {categories.map((category) => (
       <button>
           <span>{category.icon}</span>
           <span>{category.name}</span>
       </button>
   ))}
   

原理说明 #

在React项目的JS/JSX文件中，JSX语法允许直接使用<和>来定义组件标签，这是Vite内置的Babel解析器可以识别的语法。而<和>是HTML中的转义字符，仅用于在HTML中显示<和>符号，不能在JS/JSX中替代标签语法。

内容的提问来源于stack exchange，提问作者Krishnadev. V