Error: Looks like multiple versions of prosemirror-model were loaded

[karol-f]

Describe the bug
When using the editor (e.g. using ENTER key) it's not working, and we got error in the console:

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

Due to [email protected] and [email protected] loaded simultaneously.

tiptap-extensions package requires strictly version 1.8.2 and other packages prosemirror-model@^1.0.0, prosemirror-model@^1.1.0, prosemirror-model@^1.8.1 which resolves to 1.9.0

Steps to Reproduce / Codesandbox Example
Steps to reproduce the behaviour:

1. install

"tiptap": "^1.27.1",
"tiptap-extensions": "^1.29.1"

with Yarn. This will install [email protected] and [email protected].

2. When using the editor (e.g. using ENTER key) it's not working, and we got error in the console

Expected behaviour
Editor should work, there should be only one prosemirror-model package installed.

Quick and dirty workaround for users (it's not proper fix!) - use resolutions entry in package.json:

    "resolutions": {
        "prosemirror-model": "1.9.1"
    }

Then remove node_modules, yarn.lock and install packages again.

[njoguamos]

I am experiencing this issue too.

In the meantime, the workaround suggested by @karol-f is resolving the issue .

[samiell]

I am experiencing the same issue. The suggested fix is not working either.
RangeError: Can not convert <> to a Fragment (looks like multiple versions of prosemirror-model were loaded).
However, if I paste a paragraph of text, it works fine. An odd behaviour

[karol-f]

@samiell Did You install packages again after adding resolutions to package.json?

Mentioned quick fix is working, I wonder why it's not for You.

[Hyperblaster]

I think this is the same issue. I get this in the console
Error in created hook: RangeError: Adding different instances of a keyed plugin (plugin$)

[samiell]

@samiell Did You install packages again after adding resolutions to package.json?

Mentioned quick fix is working, I wonder why it's not for You.

@karol-f, it is working now with fresh yarn install

[kfields]

This looks like a smoking gun ...
warning "workspace-aggregator-55c332bc-1396-4e97-9318-7d1987769566 > tiptap-commands > [email protected]" has incorrect peer dependency "prosemirror-tables@^0.9.1"

Here's a fresh issue from prosemirror-utils: Update prosemirror-tables to 1.0.0 #85. Perhaps asking this person politely to update the dependencies will solve the issue. I did.

[stigvanbrabant]

Is there a workaround known when you're using npm instead of yarn?

[karol-f]

@stigvanbrabant maybe https://www.npmjs.com/package/npm-force-resolutions

[stigvanbrabant]

@karol-f yeah i tried that one but it doesn't seem to resolve the issue

[stigvanbrabant]

Seems that only one version is installed tho.

[jscaux]

Also experiencing this issue (I'm using npm).

[jscaux]

Isn't the clean solution simply for the maintainer @philippkuehn to bump up the dependency of tiptap from [email protected] to the latest [email protected] ? I would prefer not relying on dirty workarounds.

[karol-f]

@jscaux it might not be so simple. I've checked some time ago and there were compatibility issues with package newer than [email protected] in tiptap-extensions. Didn't check it lately though.

[jscaux]

I guess this error is being thrown by Fragment.from in prosemirror-model/src/fragment.js. The problem seems to be (from the console log Can not convert <> to a Fragment) that tiptap calls this with nodes as <> instead of null. But do you see from where it does that?

[danielchodusov]

The mentioned solution didn't help me. Nor even with the clean install :/

    "resolutions": {
        "prosemirror-model": "1.8.2"
    }

[karol-f]

The mentioned solution didn't help me. Nor even with the clean install :/

It's working with yarn - make sure You use it and not npm

[danielchodusov]

Of course I do use yarn. I tried to remove lock, add mentioned resolution, use specific versions, clear cache, remove node_modules .. yet only downgrade to 1.25 fixed the issue.

[DavidRouyer]

@danielchodusov Take a look at your yarn.lock file, you should see multiple packages resolving multiple versions of prosemirror-model. That's the issue.

[webislife]

have same problem

[nodegin]

same here

[MrZoidbergMD]

"resolutions": { "prosemirror-model": "1.8.2" }

This solution worked for me using yarn. I just added it, deletes node_modules/ and did a yarn install

[AlanHolmes]

Just what I was looking for, hopefully, this will be resolved without this workaround at somepoint

[tobischulz]

have the same but finally it worked after adding the "resolutions" to the packages.json.

after a yarn install it worked as it should be. Thank you very much.

[jscaux]

I'd love to have a solution while sticking with npm instead of moving to yarn... anybody got something useful to suggest for this?

[nodegin]

@jscaux Just modify the line in dependencies to "prosemirror-model": "1.8.2" then run npm i

[nemorize]

Same problem when using esm.sh CDN like https://tiptap.dev/docs/editor/installation/cdn.

---

But here's very hacky tricky way for those of you who need to use it in a hurry. 😭
Map all multiple versions of prosemirror-model to one version using importmap.

<head>
  <script type="importmap">
    {
      "imports": {
        "https://esm.sh/v135/[email protected]/es2022/prosemirror-model.mjs": "https://esm.sh/v135/[email protected]/es2022/prosemirror-model.mjs"
      }
    }
  </script>
</head>
<body>
  <script type="module">
    import { Editor } from 'https://esm.sh/@tiptap/core';
    // ...
  </script>
</body>

[thacoon]

Using esm.sh CDN with alpine.js I also encountered this issue. The workaround from @nemorize helps, for me it is:

    <script type="importmap">
    {
      "imports": {
        "https://esm.sh/v135/[email protected]/es2022/prosemirror-model.mjs": "https://esm.sh/v135/[email protected]/es2022/prosemirror-model.mjs"
      }
    }
  </script>

My code in my django template looks like this:

{% extends "_dashboard_base.html" %}

{% block dashboard_content %}
  <div class="w-full">
    <div class="block w-full rounded-md px-5 py-3 text-typography-default ring-1 ring-primary-black focus:ring-1 placeholder:text-typography-light sm:text-sm sm:leading-6">
      <div x-data="editor('<p>Hello world! :-)</p>')">
        <template x-if="isLoaded()">
          <div class="border-b-solid border-b border-b-gray-200 pb-3">
            <div class="flex items-center gap-3 py-1.5">
              <button @click="toggleBold()"
                      :class="{ 'is-active' : isActive('bold', updatedAt) }"
                      class="rounded-lg font-semibold is-active bg-typography-light hover:bg-typography-medium text-white py-1 px-2">
                Bold
              </button>
              <button @click="toggleItalic()"
                      :class="{ 'is-active' : isActive('italic', updatedAt) }"
                      class="rounded-lg font-semibold is-active bg-typography-light hover:bg-typography-medium text-white py-1 px-2">
                Italic
              </button>
            </div>
          </div>
        </template>
        <div x-ref="element"></div>
      </div>
    </div>
  </div>
  <script type="module">
      import {Editor} from 'https://esm.sh/@tiptap/core'
      import StarterKit from 'https://esm.sh/@tiptap/starter-kit'

      document.addEventListener('alpine:init', () => {
        Alpine.data('editor', (content) => {
          let editor;
      
          return {
            updatedAt: Date.now(), // force Alpine to rerender on selection change
            init() {
              const _this = this
      
              editor = new Editor({
                element: this.$refs.element,
                extensions: [
                  StarterKit
                ],
                content: content,
                onCreate({ editor }) {
                  _this.updatedAt = Date.now()
                },
                onUpdate({ editor }) {
                  _this.updatedAt = Date.now()
                },
                onSelectionUpdate({ editor }) {
                  _this.updatedAt = Date.now()
                }
              })
            },
            isLoaded() {
              return editor
            },
            isActive(type, opts = {}) {
              return editor.isActive(type, opts)
            },
            toggleBold() {
              editor.chain().toggleBold().focus().run()
            },
            toggleItalic() {
              editor.chain().toggleItalic().focus().run()
            },
          }
        })
      })
  </script>
{% endblock dashboard_content %}

[johntdowney]

Just ran into this issue today out of nowhere.

It's been months since anyone posted here, but for anyone who ends up here with the same issue, and you have a similar setup to me, here's how I solved it in my webpack configuration.

I have multiple common JS packages shared across a website, a browser extension, and a bunch of back-end cloud functions.

My most-common JS package is one that is shared across ALL of the pieces of our system.

To resolve this bug, I got into the webpack configuration of my shared package, and I added this bit:

  externals: {
    'prosemirror-model': {
      commonjs: 'prosemirror-model',
      commonjs2: 'prosemirror-model',
      amd: 'prosemirror-model',
      root: 'prosemirrorModel',
    }
  }

And then I got into the webpack configuration for each of my outer packages that are dependent on this common package, the ones that import this common package, and I added some code like this to their webpack configuration:

    // Etc.
    resolve: {
      alias: {
        "prosemirror-model": path.resolve(
          __dirname,
          "node_modules/prosemirror-model"
        ),
      },
    // etc

After that, I rebuilt everything and the bug went away :).

Unless I'm somehow mistaken about it being the solution (I don't think I am), the reason it went away is because I configured webpack to have every relevant package use only a single version of prosemirror-model.

This is a VERY useful technique if you have multiple interdependent webpack-based packages. It's definitely not the first time I've solved an issue like this using it. My resolve block in my current project is fairly large. Too many JS libraries get mad if you load multiple instances of them.

[Crochar6]

I'm in an environment where I have to import prosemirror with a cdn, and I'm getting the same error. What is the workaround here? I'm not even importing prosemirror-model directly.

<script type="module">
  import * as prosemirrorState from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';
  import * as prosemirrorView from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';
  import * as prosemirrorExampleSetup from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';
  import * as prosemirrorMarkdown from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';

  let schema = prosemirrorMarkdown.schema
  class ProseMirrorView {
    constructor(target, content) {
      this.view = new prosemirrorView.EditorView(target, {
        state: prosemirrorState.EditorState.create({
          doc: prosemirrorMarkdown.defaultMarkdownParser.parse(content),
          plugins: prosemirrorExampleSetup.exampleSetup({schema})
        })
      })
    }

    get content() {
      return prosemirrorMarkdown.defaultMarkdownSerializer.serialize(this.view.state.doc)
    }
    focus() { this.view.focus() }
    destroy() { this.view.destroy() }
  }
  window.ProseMirrorView = ProseMirrorView;
</script>

[nperez0111]

I'm in an environment where I have to import prosemirror with a cdn, and I'm getting the same error. What is the workaround here? I'm not even importing prosemirror-model directly.

<script type="module">
  import * as prosemirrorState from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';
  import * as prosemirrorView from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';
  import * as prosemirrorExampleSetup from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';
  import * as prosemirrorMarkdown from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';

You would need to make sure that the dep ranges declared by each of these packages import the same prosemirror-model version or else it will import them multiple times. prosemirror-markdown would be my bet on being the odd one out here

[Crochar6]

You would need to make sure that the dep ranges declared by each of these packages import the same prosemirror-model version or else it will import them multiple times. prosemirror-markdown would be my bet on being the odd one out here

Indeed, I had to change prosemittotMarkdown to 1.12 and view to 1.32, thank you.

[vedmant]

I'm having this issue with latest versions of @tiptap/vue-3 any proper way to resolve this?

[nperez0111]

You have to make sure that there are not multiple instances loaded. To check that run:
npx npm-why prosemirror-model and it will tell you why a dep exists.

Often it is because two packages declare that they need versions that are incompatible with one another (i.e. one says it needs 1.2 & another that says it needs 1.3)

With tiptap packages you should not have that issue because @tiptap/pm bundles all the prosemirror deps together, all tiptap packages should be upgraded together to the same exact version number to guarantee compatibility.

If you have any other deps that depend on prosemirror-model then it is up to you to resolve, you can force the packages to resolve to only one version yarn & pnpm have a concept of overrides, you can also force your bundler to only ever resolve a single version with aliasing.

All in all there are multiple resolutions to this issue, but they do not stem with tiptap, we have put a lot of effort to make sure you get the right packages.

[vedmant]

@nperez0111

This is my dependensies

"@tiptap/extension-link": "^2.5.4",
"@tiptap/extension-placeholder": "^2.5.4",
"@tiptap/pm": "^2.5.4",
"@tiptap/starter-kit": "^2.5.4",
"@tiptap/vue-3": "^2.5.4",

This trick helped me:

  "resolutions": {
    "prosemirror-model": "1.9.1"
  }

[giuseppeagostini-hotmart]

@nperez0111

This is my dependensies

"@tiptap/extension-link": "^2.5.4",
"@tiptap/extension-placeholder": "^2.5.4",
"@tiptap/pm": "^2.5.4",
"@tiptap/starter-kit": "^2.5.4",
"@tiptap/vue-3": "^2.5.4",

This trick helped me:

  "resolutions": {
    "prosemirror-model": "1.9.1"
  }

why this version? i have the ^2.5.7. Where do I see the best version of the prosemirror? @vedmant

[bluebergscientific]

got this issue with all tiptap packages on version 2.6.6.

this solved it for me:

"resolutions": {
    "prosemirror-model": "1.22.3"
  },

I'm using bun.

[zoltanszogyenyi]

Hey guys!

I'm trying to use this for CDN for Flowbite but I get the same error.

Here's my code:

import { Editor } from 'https://esm.sh/@tiptap/core';
import StarterKit from 'https://esm.sh/@tiptap/starter-kit';
import Highlight from 'https://esm.sh/@tiptap/extension-highlight';
import Underline from 'https://esm.sh/@tiptap/extension-underline';
import Link from 'https://esm.sh/@tiptap/extension-link';
import TextAlign from 'https://esm.sh/@tiptap/extension-text-align';

import Image from 'https://esm.sh/@tiptap/extension-image';

if (document.getElementById("wysiwyg-example")) {

    // tip tap editor setup
    const editor = new Editor({
        element: document.querySelector('#wysiwyg-example'),
        extensions: [
            StarterKit,
            Highlight,
            Underline,
            Link.configure({
                openOnClick: false,
                autolink: true,
                defaultProtocol: 'https',
            }),
            TextAlign.configure({
                types: ['heading', 'paragraph'],
            }),
            Image
        ],
        content: '<p>Flowbite is an <strong>open-source library of UI components</strong> based on the utility-first Tailwind CSS framework featuring dark mode support, a Figma design system, and more.</p><p>It includes all of the commonly used components that a website requires, such as buttons, dropdowns, navigation bars, modals, datepickers, advanced charts and the list goes on.</p><p>Here is an example of a button component:</p><code>&#x3C;button type=&#x22;button&#x22; class=&#x22;text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800&#x22;&#x3E;Default&#x3C;/button&#x3E;</code><p>Learn more about all components from the <a href="https://flowbite.com/docs/getting-started/introduction/">Flowbite Docs</a>.</p>',
        editorProps: {
            attributes: {
                class: 'format lg:format-lg dark:format-invert focus:outline-none format-blue max-w-none',
            },
        }
    });

    // set up custom event listeners for the buttons
    document.getElementById('toggleBoldButton').addEventListener('click', () => editor.chain().focus().toggleBold().run());
    document.getElementById('toggleItalicButton').addEventListener('click', () => editor.chain().focus().toggleItalic().run());
    document.getElementById('toggleUnderlineButton').addEventListener('click', () => editor.chain().focus().toggleUnderline().run());
    document.getElementById('toggleStrikeButton').addEventListener('click', () => editor.chain().focus().toggleStrike().run());
    document.getElementById('toggleHighlightButton').addEventListener('click', () => editor.chain().focus().toggleHighlight({ color: '#ffc078' }).run());
    document.getElementById('toggleLinkButton').addEventListener('click', () => {
        const url = window.prompt('Enter image URL:', 'https://flowbite.com');
        editor.chain().focus().toggleLink({ href: url }).run();
    });
    document.getElementById('removeLinkButton').addEventListener('click', () => {
        editor.chain().focus().unsetLink().run()
    });
    document.getElementById('toggleCodeButton').addEventListener('click', () => {
        editor.chain().focus().toggleCode().run();
    })

    document.getElementById('toggleLeftAlignButton').addEventListener('click', () => {
        editor.chain().focus().setTextAlign('left').run();
    });
    document.getElementById('toggleCenterAlignButton').addEventListener('click', () => {
        editor.chain().focus().setTextAlign('center').run();
    });
    document.getElementById('toggleRightAlignButton').addEventListener('click', () => {
        editor.chain().focus().setTextAlign('right').run();
    });
    document.getElementById('toggleListButton').addEventListener('click', () => {
       editor.chain().focus().toggleBulletList().run();
    });
    document.getElementById('addImageButton').addEventListener('click', () => {
        const url = window.prompt('Enter image URL:', 'https://placehold.co/600x400');
        if (url) {
            editor.chain().focus().setImage({ src: url }).run();
        }
    });
}

I tried to add:

<script type="importmap">
  {
    "imports": {
    "https://esm.sh/v135/[email protected]/es2022/prosemirror-model.mjs": "https://esm.sh/v135/[email protected]/es2022/prosemirror-model.mjs"
    }
  }
</script>

As @thacoon mentioned, but I still get the same error. Is there any way we can get this fixed via CDN?

I can't use local Yarn versioning because of the nature of our project.

I get the error when hitting enter and trying to split a block:

index.js:354 Uncaught RangeError: Can not convert <> to a Fragment (looks like multiple versions of prosemirror-model were loaded)
    at l.from (index.js:354:15)
    at l.create (index.js:2171:66)
    at ve (index.js:1139:58)
    at E.split (index.js:2043:9)
    at splitBlock.ts:103:10
    at Object.splitBlock (CommandManager.ts:137:64)
    at Array.<anonymous> (keymap.ts:59:22)
    at first.ts:22:16
    at Object.first (CommandManager.ts:39:43)
    at Enter (keymap.ts:55:52)

And I also get an error when trying to create a list item:

index.js:354 Uncaught RangeError: Can not convert <> to a Fragment (looks like multiple versions of prosemirror-model were loaded)
    at l.from (index.js:354:15)
    at l.create (index.js:2171:66)
    at B (index.js:99:50)
    at index.js:92:22
    at wrapInList.ts:24:45
    at Object.wrapInList (CommandManager.ts:86:45)
    at toggleList.ts:130:8
    at Object.toggleList (CommandManager.ts:137:64)
    at bullet-list.ts:92:25
    at Object.toggleBulletList (CommandManager.ts:86:45)

All of the other commands work.

Edit: got it working by adding:

{"imports": {"https://esm.sh/v135/[email protected]/es2022/prosemirror-model.mjs": "https://esm.sh/v135/[email protected]/es2022/prosemirror-model.mjs", "https://esm.sh/v135/[email protected]/es2022/prosemirror-model.mjs": "https://esm.sh/v135/[email protected]/es2022/prosemirror-model.mjs"}}

It's a very dirty fix though.

[gocoffeecup]

I'm getting this after upgrading to the latest version 2.7.4.

I also tried the proposed solution with using resolutions / overrides but without success.

I'm using pnpm.

[nperez0111]

2.7.4 is not the latest version, 2.8.0 is

#577 (comment)

PNPM has overrides: https://pnpm.io/package_json#pnpmoverrides

[szitastamas]

I had this error with TipTap v2.8.0. It was not a TipTap issue though:

Importing types from ProseMirror packages directly can also lead to this error. Make sure to import from tiptap/pm/model if you need e.g. Node from ProseMirror.

Bad:

import { Node } from 'prosemirror-model'

Good:

import { Node } from '@tiptap/pm/model'

[sunel-pyt]

If you are using yarn just yarn dedupe