Astro构建网站时导入Font Awesome图标报错：astro build执行失败

问题原因 #

@fortawesome/free-brands-svg-icons本质是CommonJS模块，Astro开发服务器（astro dev）对模块兼容性处理更宽松，允许命名导入；但构建阶段（astro build）严格遵循ES模块规范，导致命名导出无法被识别，触发报错。

解决方案 #

方案1：修改导入方式 #

按照报错提示的方式，改用默认导入后解构：

import pkg from '@fortawesome/free-brands-svg-icons';
const { faGithub, faLinkedin, faDiscord } = pkg;

方案2：调整TypeScript配置 #

在tsconfig.json的compilerOptions中添加两个配置项，让TypeScript更好兼容CommonJS模块的导入：

{
    "compilerOptions": {
        "target": "ESNext",
        "module": "ESNext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "types": ["astro/client"],
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true
    }
}

• esModuleInterop：启用后，TypeScript会自动处理CommonJS模块的导入，允许使用默认导入语法
• allowSyntheticDefaultImports：配合前者，让TypeScript识别CommonJS模块的"合成默认导出"，避免类型报错

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