angularnpmprose-mirrorngx-editor

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


When using the ngx-editor in my application, it used to work fine, but now when running locally (this issue is only present in my local), I get this error when I am trying to Press Enter and change to a new line. I can type normally and use the toolbar anyway otherwise it is just the enter functionality that does not work. enter image description here

I have tried the solution mentioned in this https://github.com/ueberdosis/tiptap/issues/577 , clearing node_modules and package-lock.json but even then it does not work.

"ngx-editor": "^14.2.0",


  
  "resolutions": {
    "prosemirror-model": "^1.18.1"
  }

This is the HTML code for a rich text area component in my application where the component is being called.

<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>

This component is then called in different parent components as a rich text editor. But currently only one instance of it is being called in every page, but yet this error occurs. Is there any fix?


Solution

  • Resolutions only works for YARN. If you are using npm you'd have to do the same but using "overrides" instead of "resolutions". npm does not understand the field resolutions

    "overrides": {
        "prosemirror-model": "^1.18.1"
      }