使用Font Awesome import.macro时遇@babel/helper-module-imports解析错误求助

1. 补全缺失的Babel依赖 #

报错提示找不到@babel/helper-module-imports，直接安装该开发依赖：

npm install --save-dev @babel/helper-module-imports
# 或使用yarn
yarn add -D @babel/helper-module-imports

2. 适配低版本react-scripts的Babel配置 #

你的项目使用react-scripts 1.1.4，这个版本不会自动启用babel-plugin-macros，需要手动配置：

• 先安装babel-plugin-macros：

  npm install --save-dev babel-plugin-macros
  # 或使用yarn
  yarn add -D babel-plugin-macros
  

• 修改根目录的babel.config.js（如果没有就创建），添加宏插件：

  module.exports = {
    plugins: ['babel-plugin-macros']
  };
  

• 配置Font Awesome宏的许可（根目录Babel-plugin-macros.config.js）：

  module.exports = {
    'fontawesome-svg-core': {
      'license': 'free'
    }
  };
  

3. 确保动态图标调用的正确性 #

• 确认val的取值范围是1-6，对应图标名称faDice1到faDice6，这些图标属于免费solid图标库，确保你已安装@fortawesome/free-solid-svg-icons
• 保留正确的组件调用代码：

  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
  import { solid } from '@fortawesome/fontawesome-svg-core/import.macro';
  
  // 组件内渲染逻辑
  <FontAwesomeIcon icon={solid(`faDice${val}`)} />
  

4. 清除缓存重启开发服务 #

低版本react-scripts可能存在缓存问题，执行命令重置缓存并重启：

npm start -- --reset-cache

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