React映射含React-Icons的对象时触发SyntaxError错误求助

SyntaxError: Unexpected token '<' (at navigation.js?t=1663213543000:18:11)

错误指向代码中的图标部分，已安装React-Icons "^4.4.0"版本，且代码在沙箱环境中可正常运行，但本地项目中只要保留icon: <RiContactsLine />这一行就会报错，注释该行后页面可正常渲染Dashboard和ecommerce。

navigation.js代码 #

import React from 'react';
import { RiContactsLine } from 'react-icons/ri';

export const links = [
   {
      title: 'Dashboard',
      links: [
           {
              name: 'ecommerce',
              icon: <RiContactsLine />,
           },
      ],
   }
]

Sidebar.jsx代码 #

import { links } from '../../Data/navigation.js';
import { Link, NavLink } from "react-router-dom";

const Sidebar = () => {

  return (

    <div className="sidebar-container">
        <div className="sidebar shadow-md">

            {links.map((item) => (
              <div key={item.title}>
                <p className="text-gray-400 m-3 mt-4 uppercase title">
                  {item.title}
                </p>
                {item.links.map((link) => (
                  <NavLink 
                    to={`/${link.name}`}
                    key={link.name}
                  >
                      {link.icon}
                      <span className="capitalize">
                          {link.name}
                      </span>
                  </NavLink>
                ))}
               </div>
              ))}
        </div>
    </div>
  )
}

export default Sidebar

可能的解决方法： #

• 修改文件扩展名：将navigation.js重命名为navigation.jsx。因为文件中包含JSX语法（<RiContactsLine />），部分打包工具（如Webpack）默认仅对.jsx后缀的文件处理JSX语法，.js文件会被当作普通JavaScript解析，从而无法识别<符号引发错误。
• 检查Babel配置：确保项目的Babel配置已启用@babel/preset-react预设，它负责转译JSX语法。如果是自定义Webpack配置，需确认Babel配置文件（如.babelrc或babel.config.json）中包含：

  {
    "presets": ["@babel/preset-env", "@babel/preset-react"]
  }
  

• 清理项目缓存：删除node_modules目录和package-lock.json文件，重新执行npm install；若使用Create React App，可通过npm start --reset-cache命令重置开发服务器缓存，避免旧缓存导致的解析问题。
• 验证导入路径：确认Sidebar组件中导入links的路径../../Data/navigation.js是否正确，注意区分操作系统的大小写（例如Data和data会被视为不同目录）。

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