Vite React中使用@fortawesome/fontawesome-free报错：无default导出？

问题描述 #

在Vite React项目中安装了@fortawesome/fontawesome-free，并在Navbar.jsx中导入该包后，出现以下错误：

SyntaxError: The requested module '/node_modules/.vite/deps/@fortawesome_fontawesome-free.js?v=84581a2b' does not provide an export named 'default' (at Navbar.jsx:5:1)

Navbar.jsx原导入代码片段：

import  {FontAwesomeIcon}  from '@fortawesome/fontawesome-free';
import { faBars, faTimes } from '@fortawesome/fontawesome-free';

错误原因 #

@fortawesome/fontawesome-free包仅包含FontAwesome的字体文件和全局CSS样式，并不提供React组件FontAwesomeIcon以及单个图标导出。React项目中使用FontAwesome图标需要依赖专门的React组件包和对应图标包。

解决方案 #

1. 安装必要依赖 #

在项目根目录执行以下命令，安装React组件包和实心图标包（示例中使用的faBars、faTimes属于实心图标）：

npm install @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons

2. 修正导入语句 #

将Navbar.jsx中的导入代码替换为：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons';

3. （可选）引入全局样式 #

如果需要使用FontAwesome的全局样式（如字体渲染），可以在项目入口文件（如main.jsx）或全局CSS文件中添加：

import '@fortawesome/fontawesome-free/css/all.css';

修改后，组件中的<FontAwesomeIcon icon={click ? faTimes : faBars} />即可正常工作。

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