同一npm包Dante3在CodeSandbox正常，本地报prosemirrorState.PluginKey错误

问题背景 #

在React项目中集成Dante3富文本编辑器时，本地环境出现报错：Uncaught TypeError: prosemirrorState.PluginKey is not a constructor，但相同依赖版本的在线示例可正常运行，且已向Dante3仓库提交问题未得到解决。

排查与解决方法 #

• 检查重复的ProseMirror依赖
  执行npm ls prosemirror-state查看项目中是否存在多个版本的prosemirror-state依赖。如果有重复版本，删除多余的依赖包，或在package.json中明确锁定该包的版本（与在线示例一致），然后重新安装。

• 清理依赖缓存并重装
  本地npm/yarn缓存可能导致依赖加载异常，执行以下命令重置依赖：

  # npm用户
  rm -rf node_modules package-lock.json
  npm cache clean --force
  npm install
  
  # yarn用户
  rm -rf node_modules yarn.lock
  yarn cache clean
  yarn install
  

• 调整构建工具的模块解析配置
  如果使用Vite，在vite.config.js中添加ProseMirror相关包到依赖预构建列表：

  export default {
    optimizeDeps: {
      include: ['prosemirror-state', 'prosemirror-view', 'prosemirror-model', 'dante3']
    }
  }
  

  如果使用Webpack，检查resolve配置是否存在影响ProseMirror模块解析的规则，确保相关包能被正确识别。

• 临时全局挂载PluginKey（workaround）
  若上述方法无效，可在项目入口文件（如index.js/main.jsx）中提前导入ProseMirror的PluginKey并挂载到全局，强制Dante3使用正确的构造函数：

  import { PluginKey } from 'prosemirror-state';
  window.prosemirrorState = { PluginKey };
  

内容的提问来源于stack exchange，提问作者Md Joynul Abedin