Vite.js中FontAwesome样式图标无法使用，报process未定义错误

问题原因 #

使用FontAwesome的import.macro语法时，依赖的babel-plugin-macros会调用Node.js环境的process变量，但Vite默认在浏览器环境中不提供这个变量，因此抛出Uncaught ReferenceError: process is not defined错误。

解决方案 #

1. 安装必需依赖 #

除了FontAwesome相关包，还需要安装宏处理插件：

npm install @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons babel-plugin-macros vite-plugin-babel-macros --save

2. 配置Vite #

在项目根目录的vite.config.js中添加插件配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import macrosPlugin from 'vite-plugin-babel-macros'

export default defineConfig({
  plugins: [react(), macrosPlugin()],
  // 可选：注入process.env占位避免其他潜在错误
  define: {
    'process.env': {}
  }
})

3. 验证代码 #

你的App.jsx代码无需修改，保持原写法即可：

import "./App.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  solid,
  regular,
  brands,
  icon,
} from "@fortawesome/fontawesome-svg-core/import.macro";

function App() {
  return (
    <div className="App">
      <FontAwesomeIcon icon={solid("user-secret")} />
      <FontAwesomeIcon icon={regular("coffee")} />
      <FontAwesomeIcon icon={icon({ name: "coffee", style: "solid" })} />
      <FontAwesomeIcon icon={brands("twitter")} />
    </div>
  );
}

export default App;

关于FontAwesome import.macro的说明 #

import.macro是FontAwesome提供的一种按需引入图标的方式，通过babel宏在编译时自动分析代码中用到的图标，只打包这些图标资源，实现树摇优化，减少最终打包体积。使用该方式必须配合babel宏处理工具，这也是为什么需要在Vite中配置vite-plugin-babel-macros的原因。

内容的提问来源于stack exchange，提问作者Ali Ahmadi