IE浏览器出现graphql SCRIPT5022错误的排查与解决求助

我之前在做项目IE兼容的时候，刚好碰到过这个一模一样的问题！就是你遇到的SCRIPT5022: Cannot use undefined "Boolean" from another module or realm报错，根源确实是项目的node_modules里存在多个不同版本的graphql实例——IE对模块的隔离逻辑比现代浏览器更严格，不同版本的graphql里的内置类型（比如Boolean）会被当成不同的"realm"，导致类型校验失败，报错正好来自./node_modules/graphql/module/jsutils/instanceOf.js里的类型判断代码。

下面是我亲测有效的解决步骤：

1. 先确认到底哪些依赖带了重复的graphql #

先跑个命令看看依赖树里的graphql版本情况，搞清楚是哪个包引入了别的版本：

# npm用户
npm ls graphql

# yarn用户
yarn list graphql

执行后你会看到所有依赖里的graphql条目，能清楚看到哪些包用了和主依赖不一样的版本。

2. 用配置强制统一graphql版本 #

根据你用的包管理器，在package.json里加一段配置来锁死graphql版本：

• yarn用户：直接加resolutions字段：

  "resolutions": {
    "graphql": "^16.6.0" // 这里换成你项目主依赖里的graphql版本，别随便换陌生版本
  }
  

• npm 8+用户：用overrides字段（npm 8之前不支持，得升级npm或者用其他办法）：

  "overrides": {
    "graphql": "^16.6.0"
  }
  

3. 重新安装依赖 #

把旧的依赖和锁文件清掉，重新装一遍，确保配置生效：

# npm操作
rm -rf node_modules package-lock.json
npm install

# yarn操作
rm -rf node_modules yarn.lock
yarn install

4. 验证效果 #

再跑一遍之前的依赖查看命令，确认所有依赖都用了同一个版本的graphql，之后再在IE里测项目，这个SCRIPT5022错误应该就彻底消失了。

小提醒：尽量用你项目主依赖里已经声明的graphql版本，别随便换高版本或者低版本，避免引入新的兼容问题。

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