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

[Jerome77777]

What’s the bug you are facing?

This error occurs when I use the enter key or use the insertContent method

Which browser was this experienced in? Are any special extensions installed?

chrome 102.0.5005.115 version

"@tiptap/extension-bubble-menu": "^2.0.0-beta.217", "@tiptap/extension-collaboration": "^2.0.0-beta.217", "@tiptap/extension-collaboration-cursor": "^2.0.0-beta.217", "@tiptap/extension-color": "^2.0.0-beta.217", "@tiptap/extension-highlight": "^2.0.0-beta.217", "@tiptap/extension-image": "^2.0.0-beta.217", "@tiptap/extension-link": "^2.0.0-beta.217", "@tiptap/extension-placeholder": "^2.0.0-beta.217", "@tiptap/extension-table": "^2.0.0-beta.217", "@tiptap/extension-table-cell": "^2.0.0-beta.217", "@tiptap/extension-table-header": "^2.0.0-beta.217", "@tiptap/extension-table-row": "^2.0.0-beta.217", "@tiptap/extension-task-item": "^2.0.0-beta.217", "@tiptap/extension-task-list": "^2.0.0-beta.217", "@tiptap/extension-text-align": "^2.0.0-beta.217", "@tiptap/extension-text-style": "^2.0.0-beta.217", "@tiptap/extension-underline": "^2.0.0-beta.217", "@tiptap/pm": "^2.0.0-beta.217", "@tiptap/starter-kit": "^2.0.0-beta.217", "@tiptap/vue-3": "^2.0.0-beta.217",

How can we reproduce the bug on our side?

use the extensions below

"@tiptap/extension-bubble-menu": "^2.0.0-beta.217", "@tiptap/extension-collaboration": "^2.0.0-beta.217", "@tiptap/extension-collaboration-cursor": "^2.0.0-beta.217", "@tiptap/extension-color": "^2.0.0-beta.217", "@tiptap/extension-highlight": "^2.0.0-beta.217", "@tiptap/extension-image": "^2.0.0-beta.217", "@tiptap/extension-link": "^2.0.0-beta.217", "@tiptap/extension-placeholder": "^2.0.0-beta.217", "@tiptap/extension-table": "^2.0.0-beta.217", "@tiptap/extension-table-cell": "^2.0.0-beta.217", "@tiptap/extension-table-header": "^2.0.0-beta.217", "@tiptap/extension-table-row": "^2.0.0-beta.217", "@tiptap/extension-task-item": "^2.0.0-beta.217", "@tiptap/extension-task-list": "^2.0.0-beta.217", "@tiptap/extension-text-align": "^2.0.0-beta.217", "@tiptap/extension-text-style": "^2.0.0-beta.217", "@tiptap/extension-underline": "^2.0.0-beta.217", "@tiptap/pm": "^2.0.0-beta.217", "@tiptap/starter-kit": "^2.0.0-beta.217", "@tiptap/vue-3": "^2.0.0-beta.217",

Can you provide a CodeSandbox?

No response

What did you expect to happen?

no error when I use the enter key or use the insertContent method

Anything to add? (optional)

No response

Did you update your dependencies?

• [X] Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• [ ] Yes, I’m a sponsor. 💖

[bdbch]

Thanks for the issue @Jerome77777 Could you create a CodeSandbox so we can reproduce your issue?

[kimili]

I too am seeing this issue with using the Mention component to insert a matched name. In my case using TipTap with Stimulus.js, not React or Vue, so it's being initialized with new Editor() on server rendered HTML. I've not yet been able to come up with a CodeSandbox to recreate it (this seems to work properly with a React implementation).

This is an issue with beta-220. It was working properly with earlier betas (212 was the last version I had installed where this was working properly)

If I'm able to come up with a code sandbox that recreates the problem, I'll add another comment here if I can isolate the issue.

Here is what I'm seeing in the console when I try to select a matched name in the mention list:

[kimili]

Update on my previous comment.

My efforts to recreate the issue in CodeSandbox were not successful. It seems to work as intended with a clean build. So I looked back in my package.json file, I had the packages defined with the caret ^ like so:

"@tiptap/core": "^2.0.0-beta.220"

Also, I have been updating the dependencies every few weeks, and my inclusion of tiptap in this project predates the addition of @tiptap/pm, so I used to have the prosemirror packages included too.

To figure out where things went wrong, I went back to beta 209, which required the prosemirror packages and tried to compile the app with that, but ran into some issues where it was still looking for @tiptap/pm packages. I then yarn removeed all of the prosemirror packages and stepped through each subsequent tiptap beta version, pinning the version and building. I got all the way back up to 220, and weirdly, I've got mentions working properly again.

I suspect that there was some version caching issue in the yarn.lock file which was causing issues. @Jerome77777, maybe you can try removing your lockfile and rebuilding?

[bdbch]

Try for clarifying @kimili !

[github-actions[bot]]

This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 7 days

[hrynevychroman]

Any updates here? using Parcel with Pnpm to bundle on my project and this error disable all usability of tiptap

[hrynevychroman]

See in this issue that "resolution" fixes all, but not for me 😞

Issue Link: https://github.com/ueberdosis/tiptap/issues/577

[hrynevychroman]

Sorry, just noticed that I really init this editor 2 times, my fault 😁 When i delete script in php file, everything works fine ❤️

[enzedonline]

This is reproducible just using the demo code with CDN from the docs:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <div class="element"></div>
  <script type="module">
    import { Editor } from 'https://esm.sh/@tiptap/core'
    import StarterKit from 'https://esm.sh/@tiptap/starter-kit'
    const editor = new Editor({
      element: document.querySelector('.element'),
      extensions: [
        StarterKit,
      ],
      content: '<p>Hello World!</p>',
    })
  </script>
</body>
</html>

Reading other bug reports, it's been around some years now, surprised this isn't being picked up with some urgency. You can workaround by adding the following above your imports:

<script type="importmap">
  {
    "imports": {
      "https://esm.sh/v135/prosemirror-model@1.20.0/es2022/prosemirror-model.mjs": "https://esm.sh/v135/prosemirror-model@1.19.3/es2022/prosemirror-model.mjs"
      }
  }
</script>

It's a bit of a monkey patch though.

[nperez0111]

So the root of this issue is that some prosemirror packages need to be imported only once into a build, because it relies on instanceof checks which would fail if imported from different versions or even CJS vs. ESM builds of the package.

Specifically the issue is that the CDN is not resolving the packages according to their declared peerdeps, because it cannot know what other packages you've imported, just the one that you have requested.

I would prefer to track this issue here: https://github.com/ueberdosis/tiptap/issues/4873

[Toru-Takagi]

I encountered the same issue in a Next.js project, but I was able to resolve it for now with the following workaround. Although it doesn't solve the core issue, I hope it can be helpful to someone.

https://blog.toru-takagi.dev/article/43