React引入@fortawesome/react-fontawesome报default导出未找到错误

报错核心触发原因是导入语法与包的导出规则不匹配：
@fortawesome/react-fontawesome 没有提供默认导出（default export），仅对外具名导出FontAwesomeIcon成员。当前代码用默认导入的写法加载这个模块，打包器找不到对应的默认导出项就会抛出这个错误，报错提示里的possible exports: FontAwesomeIcon也明确写了这个包可用的导出内容。
另外贴出的组件代码还有几处语法问题，就算改了导入也跑不起来，下面的修复步骤会一起处理。

• 修正FontAwesomeIcon的导入语句，把默认导入改成具名导入：
  删掉原来错误的导入行：

  import FontAwesomeIcon from '@fortawesome/react-fontawesome'
  

  替换为正确的具名导入写法：

  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
  

• 修复组件内的语法问题：
  • 箭头函数里的JSX内容没有加return，组件不会返回任何渲染内容，需要补上return，或者用箭头函数直接返回值的简写语法
  • 删掉没有对应开标签的冗余</div>闭合标签，补全侧边栏的外层容器结构
  • 如果你用的是v6及以上版本的react-router-dom，要把标签上的activeclassname改成驼峰写法activeClassName，根路径的NavLink不需要加exact="true"，v6默认对根路径做精确匹配

import './index.scss'
import { Link, NavLink } from 'react-router-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHome } from '@fortawesome/free-solid-svg-icons'

const SideBar = () => {
  return (
    <div className="sidebar">
      <nav>
        <NavLink activeClassName="active" to="/">
          <FontAwesomeIcon icon={faHome} color="#4d4d4d" />
        </NavLink>
      </nav>
    </div>
  )
}

export default SideBar

保存后重新触发编译，报错就会消除。

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