使用FontAwesome 6 React库出现“process is not defined”错误的解决方法

错误原因 #

该错误由以下两点共同导致：

• 你使用了FontAwesome的import.macro特性，而React Scripts 5.x（你当前用的是5.0.1）不再在浏览器环境中注入Node.js全局变量（如process）；
• 你依赖的path是Node.js内置模块，浏览器环境无法识别，导致babel-plugin-macros加载时触发报错。

解决方案 #

方案1：改用标准图标导入（推荐） #

放弃import.macro的使用，直接导入所需图标，这是最简洁的解决方式：

• 替换宏导入代码：

  // 旧的宏导入方式
  import { faCoffee } from '@fortawesome/fontawesome-svg-core/import.macro'
  

• 改为标准导入：

  // 新的标准导入方式
  import { faCoffee } from '@fortawesome/free-solid-svg-icons';
  

• 按常规流程注册图标：

  import { library } from '@fortawesome/fontawesome-svg-core';
  library.add(faCoffee);
  

方案2：移除不必要的依赖 #

从package.json的dependencies中删除path包——它是Node.js内置模块，前端项目无需单独安装：

// 移除这一行依赖
"path": "^0.12.7",

执行npm install更新依赖列表。

方案3：注入process变量（仅当必须使用宏时） #

如果一定要保留import.macro，可以通过自定义Webpack配置注入变量：

1. 安装依赖：

   npm install react-app-rewired customize-cra --save-dev
   

2. 在项目根目录创建config-overrides.js：

   const { override, addWebpackPlugin } = require('customize-cra');
   const webpack = require('webpack');
   
   module.exports = override(
     addWebpackPlugin(
       new webpack.DefinePlugin({
         'process.env': JSON.stringify(process.env),
         'process': { env: process.env }
       })
     )
   );
   

3. 修改package.json中的启动脚本：

   "scripts": {
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test"
   }
   

最优选择 #

优先采用方案1+方案2，既符合前端项目环境规范，又避免额外配置开销，能快速恢复FontAwesome的正常使用。

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