本地环境ngx-editor回车换行报RangeError的修复方案咨询

问题描述 #

应用使用^14.2.0版本的ngx-editor，此前运行正常，仅本地环境按下回车键换行时触发报错：

RangeError: Can not convert <> to a Fragment (looks like multiple versions of prosemirror-model were loaded)

其余输入、工具栏功能均正常。已尝试清理node_modules和package-lock.json、通过resolutions锁定prosemirror-model为^1.18.1，但问题未解决。

组件调用HTML代码如下：

<form [formGroup]="editorForm" class="w-100-p">
    <div class="editor" [class.has-menu]="showMenu">
        <ngx-editor-menu *ngIf="showMenu" [editor]="editor" [toolbar]="toolbar">
        </ngx-editor-menu>
        <ngx-editor (focusIn)="showHideEditorMenuFn(true,$event)" [placeholder]="placeholder" [editor]="editor"
            formControlName="editorContent">
        </ngx-editor>
    </div>
</form>

注：该组件被多个父组件调用，但当前每页仅实例化一次。

可行修复方案 #

• 检查依赖树并强制统一版本
  执行npm ls prosemirror-model查看依赖树，确认是否有其他包引入了不同版本的prosemirror-model。若存在冲突，使用npm 8+的overrides替代resolutions强制统一版本：

  // package.json中添加
  "overrides": {
    "prosemirror-model": "^1.18.1"
  }
  

  执行npm install后重新启动项目。

• 完善编辑器实例的销毁逻辑
  确保组件销毁时正确销毁编辑器实例，避免内存残留导致版本冲突：

  // 组件.ts文件中补充销毁逻辑
  ngOnDestroy(): void {
    this.editor.destroy();
  }
  

• 清理本地开发缓存
  重启开发服务器时添加清缓存参数：ng serve --clearCache，同时清理浏览器缓存后重新加载页面，避免旧依赖缓存干扰。

• 验证依赖兼容性
  查看ngx-editor@14.2.0的peerDependencies配置，确认其要求的prosemirror-model版本范围，调整锁定版本为兼容范围后重新安装依赖。

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