React项目npm run build编译失败，提示不支持动态import()语法

问题根源 #

你直接通过import语句导入了Font Awesome的CDN JS文件，这是生产构建失败的核心原因。React的生产构建工具（如Webpack）会做严格的语法校验和打包优化，无法处理这种外部ES模块的导入方式，而目标环境不支持在脚本中使用外部type='module'资源，从而触发编译错误。

解决方案 #

方案1：使用官方npm包引入（推荐）

1. 移除代码中的CDN导入行：

   // 移除这一行
   // import 'https://kit.fontawesome.com/a076d05399.js'
   

2. 安装Font Awesome的React适配包：

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

3. 在组件中按需导入并使用图标：

   import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
   import { faHome, faUser } from '@fortawesome/free-solid-svg-icons';
   
   // 在组件内使用
   <FontAwesomeIcon icon={faHome} />
   

方案2：保留CDN方式，修改引入位置

如果不想安装依赖，直接在项目的public/index.html中添加script标签引入，不要用import：

<!-- 放在public/index.html的<head>或<body>末尾 -->
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>

这样构建工具不会处理该外部脚本，可绕过编译错误。

为什么开发环境正常？ #

npm start启动的开发服务器对语法校验和打包规则更宽松，允许临时的外部导入方式；但npm run build的生产构建会严格遵循打包规范，确保输出代码兼容目标环境，因此会暴露这类不规范的导入问题。

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