升级react-scripts至5.0.1后@heroicons/react报错如何解决

该问题由依赖版本兼容问题导致：

• react-scripts 5.0.1 内置构建工具升级为 webpack 5，对 ESM 模块的导入导出校验逻辑更严格，不再兼容旧的CommonJS/ESM混用的模糊写法
• 项目中安装的@heroicons/react版本过低，旧版本ESM产物使用import * as React from 'react'导入React后，通过React.createElement、React.forwardRef的方式调用API，这种写法在webpack 5的ESM校验规则下会被判定为未从react模块导入对应导出项，直接抛出编译错误。

按优先级选择以下方案即可：

• 方案1：升级@heroicons/react到最新大版本
  执行安装命令升级到v2+版本，官方已完全适配webpack 5的ESM解析规则：
  npm install @heroicons/react@latest
  注意v2版本调整了图标导入路径和部分图标命名，原有导入路径@heroicons/react/outline需要修改为@heroicons/react/24/outline，如果要保留原有图标名可以在导入时加别名，例如：
  import { Bars3Icon as MenuIcon } from '@heroicons/react/24/outline'
• 方案2：固定安装v1分支的兼容补丁版本（无需修改业务代码）
  如果不想调整现有业务代码的导入逻辑，直接安装v1分支的最终修复版即可，该版本已经修正了React的ESM导入写法：
  npm install @heroicons/react@1.0.6
• 方案3：清理缓存重装依赖
  如果执行完上述版本调整后仍报错，先删除node_modules文件夹和对应锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml），重新执行npm install安装全量依赖，清除本地缓存的旧版本依赖副本即可。

注意：不要手动修改node_modules内的依赖源码，重新安装依赖时会覆盖修改，无法永久解决问题。

内容的提问来源于stack exchange，提问作者Sam-Dev