Angular项目多依赖引入不同版本MobX报错，configure方法应在何处执行？

问题原因 #

项目中mobx-react对等依赖MobX v6.1.0，@circlon/angular-tree-component依赖MobX v4.14.1，npm/yarn安装依赖时会同时拉取两个版本的MobX包，触发MobX自带的多版本检测逻辑，抛出如下错误：

[mobx] There are multiple, different versions of MobX active. Make sure MobX is loaded only once or use configure({ isolateGlobalState: true })

临时规避方案（快速消错） #

configure({ isolateGlobalState: true })需要在所有MobX相关代码执行前调用，Angular项目的最早执行入口是main.ts，操作步骤如下：

• 打开项目根目录下的src/main.ts文件，在最顶部优先导入MobX并执行配置：

// main.ts 顶部第一行就导入配置
import { configure } from 'mobx'
configure({ isolateGlobalState: true })

// 原有Angular启动逻辑保持不变
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
import { AppModule } from './app/app.module'

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => console.error(err))

• 配置作用说明：开启全局状态隔离后，每个加载的MobX实例会维护独立的内部状态，不会互相检测冲突，直接消除报错。如果低版本MobX仍然抛错，可以在对应依赖的初始化逻辑前同样加入该配置即可。

根本解决方案（推荐，减少包体积） #

临时方案会保留两份MobX代码，增加产物体积，更推荐通过依赖覆盖统一所有库使用的MobX版本：

• 若使用npm >= 8.3，在package.json中新增overrides配置强制所有依赖使用MobX v6.1.0：

{
  "name": "your-angular-project",
  "dependencies": {
    // 原有依赖保持不变
  },
  "overrides": {
    "mobx": "^6.1.0"
  }
}

• 若使用yarn，在package.json中新增resolutions配置：

{
  "name": "your-angular-project",
  "dependencies": {
    // 原有依赖保持不变
  },
  "resolutions": {
    "mobx": "^6.1.0"
  }
}

• 配置完成后删除node_modules文件夹、package-lock.json或yarn.lock文件，重新执行npm install或yarn install即可。@circlon/angular-tree-component对MobX v6兼容性较好，绝大部分场景不会出现功能异常，若遇到兼容问题再退回到临时规避方案即可。

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