项目运行时@ampproject/remapping编译失败 GenMapping导入异常

本地项目启动运行时，依赖包@ampproject/remapping抛出编译错误，此前项目可正常运行，近期未对项目代码做任何修改，初步定位为依赖版本兼容问题。
具体编译失败报错如下：

./node_modules/@ampproject/remapping/dist/remapping.mjs
Can't import the named export 'GenMapping' from non EcmaScript module (only default export is available)

报错含义：无法从非EcmaScript模块导入命名导出项GenMapping，目标模块仅支持默认导出。

该问题由依赖版本不兼容触发：@ampproject/remapping在2.3.0及后续版本调整了模块导出规则，和项目中使用的低版本构建工具（如webpack4、4.x版本及以下的react-scripts）的ESM模块解析逻辑不匹配。如果项目未锁定该依赖的版本，执行依赖安装时会自动拉取存在兼容问题的高版本包，直接导致原本正常的项目编译失败。

根据项目实际情况选以下任意一种方案即可：

• 固定依赖到兼容版本
  在项目根目录执行命令，将@ampproject/remapping固定安装到不存在兼容问题的2.2.0版本：
  npm install @ampproject/remapping@2.2.0 --save-exact
  安装完成后删除node_modules目录、对应包管理器的锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml），重新执行依赖安装命令后启动项目即可。
• 通过包管理器配置强制全局解析兼容版本
  无需删除现有依赖，直接在package.json中增加配置，强制项目内所有依赖引用的@ampproject/remapping都使用兼容版本：
  若使用npm作为包管理器，在package.json根层级添加：

  "overrides": {
    "@ampproject/remapping": "2.2.0"
  }
  

  若使用yarn作为包管理器，在package.json根层级添加：

  "resolutions": {
    "@ampproject/remapping": "2.2.0"
  }
  

  配置保存后重新执行依赖安装命令即可生效。
• 升级构建工具适配新版依赖
  如果项目有长期迭代计划，可以将构建工具升级到支持新版ESM模块规范的版本（如webpack升级到5.x、react-scripts升级到5.x及以上），即可兼容最新版@ampproject/remapping。该方案改动范围较大，需要提前评估项目内其他依赖的适配成本。

内容的提问来源于stack exchange，提问作者Ali M. Sadeghi