react-fontawesome在Firefox 47等旧浏览器中出现_hooks[hook].push报错求助

问题原因 #

Firefox 47属于老旧浏览器，不支持ES2015+的部分特性，而你使用的@fortawesome/react-fontawesome@0.2.0和fontawesome-svg-core@6.2.0默认发布的代码包含未转译的ES6+语法，导致watch模块中的数组初始化或方法调用失败，触发_hooks[hook].push is not a function错误。

解决方案 #

方案1：调整Vite编译配置，强制转译依赖 #

修改vite.config.js，指定编译目标为ES2015，并将fontawesome相关包纳入强制转译范围：

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

export default defineConfig({
  plugins: [react()],
  // 构建时指定兼容ES2015
  build: {
    target: ['es2015']
  },
  optimizeDeps: {
    esbuildOptions: {
      target: 'es2015',
      // 强制转译所有fontawesome相关依赖
      include: [
        '@fortawesome/fontawesome-svg-core',
        '@fortawesome/react-fontawesome',
        '@fortawesome/free-regular-svg-icons',
        '@fortawesome/free-solid-svg-icons',
        '@fortawesome/pro-duotone-svg-icons',
        '@fortawesome/pro-light-svg-icons',
        '@fortawesome/pro-regular-svg-icons',
        '@fortawesome/pro-solid-svg-icons'
      ]
    }
  }
})

修改后重新执行yarn run build和yarn run preview测试。

方案2：降级fontawesome到兼容旧浏览器的版本 #

FontAwesome 6.x版本已不再对Firefox 47这类旧浏览器提供支持，降级到5.x版本可解决兼容问题：

1. 修改package.json中的依赖版本：

{
  "@fortawesome/fontawesome-svg-core": "^5.15.4",
  "@fortawesome/free-regular-svg-icons": "^5.15.4",
  "@fortawesome/free-solid-svg-icons": "^5.15.4",
  "@fortawesome/pro-duotone-svg-icons": "^5.15.4",
  "@fortawesome/pro-light-svg-icons": "5.15.4",
  "@fortawesome/pro-regular-svg-icons": "^5.15.4",
  "@fortawesome/pro-solid-svg-icons": "^5.15.4",
  "@fortawesome/react-fontawesome": "^0.1.17"
}

2. 删除node_modules和yarn.lock，重新执行yarn install
3. 编译并测试页面

方案3：添加Polyfill补充旧浏览器缺失的特性 #

在项目入口文件（如main.jsx）顶部引入core-js的polyfill，补充旧浏览器缺失的ES2015+特性：

// 补充数组、对象相关的ES2015特性
import 'core-js/es/array';
import 'core-js/es/object';

先安装core-js依赖：

yarn add core-js

此方案建议配合方案1使用，确保所有缺失的特性都被补充。

内容的提问来源于stack exchange，提问作者Daniel Rosendo de SOuza