overmind graphql场景下导入Phoenix npm包报错如何解决？

我执行npm install重新安装所有Node模块后遇到以下报错：

Cannot find module 'phoenix' from 'node_modules/@absinthe/socket/compat/cjs/index.js'

报错触发自@absinthe/socket/compat/cjs/index.js文件中的require('phoenix');语句。
同时overmind-graphql也依赖phoenix，IDE中也显示该导入异常：overmind-graphql对应代码行里的import { Socket as PhoenixSocket } from 'phoenix';导入失败。

本地已安装的相关依赖版本如下：

"overmind": "^28.0.1",
"overmind-graphql": "^8.0.1",
"overmind-react": "^29.0.1",
"phoenix": "^1.6.0",
"@absinthe/socket": "^0.2.1",
"graphql": "^15.5.1",
"graphql-react": "^15.0.0",
"graphql-tag": "^2.12.4",
"react": "^17.0.1"

已经尝试过以下操作都没有解决问题：

• 手动重新安装phoenix和@absinthe/socket
• 删除整个node_modules目录后重新安装所有依赖
• 删除package-lock.json和node_modules后重新安装所有依赖
• 移除React组件中对overmind的导入：此时无报错，因为不会执行到phoenix的导入逻辑
• 用next build和next start运行，替代热重载的next dev模式

解决方案 #

方案1：降级phoenix到适配版本 #

@absinthe/socket 0.2.1版本适配的是phoenix 1.5.x的导出结构，1.6.0之后phoenix调整了包导出规则，CJS模式下直接require会找不到入口。直接安装1.5.x分支的最终版本即可：

npm install phoenix@1.5.13

方案2：配置模块别名（不想降级phoenix可选） #

你使用的是Next.js框架，可以在next.config.js中添加webpack别名，手动指定phoenix的CJS入口路径：

// next.config.js
module.exports = {
  webpack: (config) => {
    config.resolve.alias['phoenix'] = require.resolve('phoenix/priv/static/phoenix.cjs.js')
    return config
  }
}

方案3：强制统一依赖版本 #

如果存在多版本phoenix共存的问题，可以在package.json中添加对应配置强制所有依赖使用同一个phoenix版本：

• 用yarn/pnpm的用户，添加resolutions字段：

"resolutions": {
  "phoenix": "^1.6.0"
}

• 用npm 8.3+的用户，添加overrides字段：

"overrides": {
  "phoenix": "^1.6.0"
}

配置完成后重新安装依赖即可。

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