React引入FontAwesome、react-router报找不到模块如何解决

问题根因 #

• 核心诱因是混用npm和yarn安装依赖：两个包管理器使用独立的锁文件（npm对应package-lock.json，yarn对应yarn.lock）维护依赖版本、目录映射关系，交叉执行安装命令会导致依赖树软链接、解析路径错乱，即使肉眼可见node_modules下存在对应依赖文件夹，webpack打包时也无法定位到正确的模块入口。
• 伴随存在两处依赖声明/代码引用错误：
  • 你的package.json依赖列表中未正式声明@fortawesome/free-regular-svg-icons，交叉安装时该包未被正确纳入依赖解析树
  • 你安装的React Router v6版本已将DOM相关路由组件（如BrowserRouter）迁移至react-router-dom包，仅安装react-router无法获取对应组件；同时v6版本已移除Switch组件，旧版引入写法本身存在兼容问题

分步修复操作 #

1. 清理损坏依赖环境，统一包管理器 #

全程只使用npm或yarn其中一种包管理器，禁止交叉混用，先执行命令清理损坏的依赖和锁文件：

# 删除现有依赖目录
rm -rf node_modules
# 删除两种包管理器生成的锁文件
rm -f package-lock.json yarn.lock

选定包管理器后重装基础依赖：

• 若使用npm，执行npm install
• 若使用yarn，执行yarn install

2. 补全缺失依赖 #

统一使用选定的包管理器安装缺失的FontAwesome相关依赖：

# npm执行
npm i @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/react-fontawesome

# yarn执行
yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/react-fontawesome

补全React Router对应的DOM包：

# npm执行
npm i react-router-dom

# yarn执行
yarn add react-router-dom

3. 修正代码引用错误 #

修复FontAwesome组件引入

你之前的代码仅导入了faBell图标，未导入FontAwesomeIcon核心组件，修正后的引入代码如下：

// 补全FontAwesomeIcon组件导入
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBell } from "@fortawesome/free-regular-svg-icons";

function Form() {
    return(
        <div className='container w-[1000px] p-5 mx-auto border rounded-2xl'>
            <div className='flex flex-wrap'>
                <label className="mr-5">Name</label>
            </div>
            <div className='flex flex-row w-full justify-end'>
                <button className="pointer-events-auto ml-8 rounded-md bg-indigo-600 py-2 px-3 text-[0.8125rem] font-semibold leading-5 text-white hover:bg-indigo-500">
                    <FontAwesomeIcon icon={faBell} />
                    Save
                </button>
            </div>
        </div>
    )
}
export default Form;

修复React Router引入

React Router v6中Switch已替换为Routes，所有DOM类路由组件从react-router-dom导入，修正后的引入代码如下：

import {
    BrowserRouter as Router,
    Routes,
    Route,
} from "react-router-dom";

注意：React Router v6的路由配置规则与v5差异较大，Route组件需通过element属性传入要渲染的页面组件，不要沿用旧版component/render属性写法，避免后续出现其他兼容错误。

4. 重启开发服务验证 #

清除开发服务缓存后重新启动：

• npm执行npm start
• yarn执行yarn start
  后续安装新依赖全程使用选定的同一种包管理器即可，不要交叉执行npm和yarn命令。

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