react-fontawesome与Webpack4.33报错TypeError: Object(...) is not a function求助

你遇到的这个错误，通常和版本不兼容、错误的API使用方式或者Webpack未正确转译依赖包有关，我帮你梳理几个排查方向：

1. 检查依赖版本兼容性 #

react-fontawesome 和它的核心依赖 @fortawesome/fontawesome-svg-core 版本必须匹配，否则容易出现API不兼容的问题。

• 打开你的 package.json，确认 @fortawesome/react-fontawesome、@fortawesome/fontawesome-svg-core 以及你使用的图标包（比如 @fortawesome/free-solid-svg-icons）版本是否一致。
• 如果版本混乱，建议卸载后重装适配Webpack 4的稳定版本：

npm uninstall @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons
npm install @fortawesome/fontawesome-svg-core@1.2.36 @fortawesome/react-fontawesome@0.1.17 @fortawesome/free-solid-svg-icons@5.15.4

2. 修正react-fontawesome的使用方式 #

你代码里直接调用了 icon() 函数，但react-fontawesome的标准用法是使用官方封装的 FontAwesomeIcon 组件，而非手动调用核心库的底层API：

错误的用法（类似你当前的代码）：

// 不推荐直接调用icon函数
import { icon } from '@fortawesome/fontawesome-svg-core';

const renderedIcon = icon(iconLookup, { ...options });

正确的用法：

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

// 在组件中渲染
function MyComponent() {
  return <FontAwesomeIcon icon={faCoffee} />;
}

3. 调整Webpack的Babel转译规则 #

你的Webpack配置中，babel-loader 排除了所有 node_modules 目录，但 @fortawesome 旗下的部分包可能使用了未转译的ES6+语法，而Webpack 4对这类语法的支持有限。修改规则，让Babel转译 @fortawesome 下的代码：

修改Webpack配置中的 module.rules：

{ 
  test: /\.js$/, 
  use: 'babel-loader', 
  // 排除node_modules，但不排除@fortawesome目录
  exclude: /node_modules(?!\/@fortawesome)/, 
}

4. 验证依赖安装完整性 #

确保你已经安装了所有必需的依赖包，缺一不可：

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

按照以上步骤逐一排查，应该能解决你遇到的TypeError问题。如果还是不行，可以尝试删除 node_modules 和 package-lock.json，重新安装所有依赖后再测试。

内容的提问来源于stack exchange，提问作者Abdiel Ortega