[Documentation]: Broken CDN import from https://esm.sh

[mbovel]

What’s the URL to the page you’re sending feedback for?

https://tiptap.dev/docs/editor/installation/cdn

What part of the documentation needs improvement?

Copy and pasting the example and trying to type a line break in the editor throws: "RangeError: Can not convert <> to a Fragment (looks like multiple versions of prosemirror-model were loaded)".

Indeed, both versions of 1.32.4 and 1.32.7 of prosemirror-view, and versions 1.19.3 and 1.19.4 of prosemirror-model are loaded for example.

Current version of @tiptap/core and @tiptap/starter-kit is 2.2.2. I get the same problem with 2.2.1 and 2.2.0.

The same code seems to work fine when imported from jsdeliver:

import { Editor } from 'https://cdn.jsdelivr.net/npm/@tiptap/core@2.2.2/+esm'
import { StarterKit} from 'https://cdn.jsdelivr.net/npm/@tiptap/starter-kit@2.2.2/+esm'
const editor = new Editor({
    element: document.querySelector('.element'),
    extensions: [
        StarterKit,
    ],
    content: '<p>Hello World!</p>',
})

[mattbarrry]

Okay this is a better explanation of what I was experiencing in #4780, thanks for the tip - switching CDNs resolved it for me, but the suggested CDN should definitely be reconsidered.

[corrupt952]

This might be related to #3800. I have confirmed that the code exemplified on the CDN does not work. CodePen

As a response to this issue, we might need to:

• Define the importmap
• Change the CDN (This issue)

I think we should update the CDN in the documentation to ensure that new users do not encounter this problem. If there are no issues with creating a PR for the CDN change, I would like to create it and make the necessary updates.

[lekoala]

I'm having this error as well when pressing return on the last line of the editor RangeError: Can not convert <> to a Fragment (looks like multiple versions of prosemirror-model were loaded) tiptap is wrapped in a custom element, but i don't see why it would break anything

edit: it seems its due to compiling tiptap with bun, compiling with npm it works fine

[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 think that ultimately what we can do here is to specifically bundle in the prosemirror packages in our @tiptap/pm package without having to actually resolve versions and leave it up to a bundler.

[nperez0111]

So I came up with a draft PR for this that would bundle in all of the prosemirror packages into the @tiptap/pm package, the issue is that people who were using prosemirror outside of tiptap would now be broken because their instanceof checks would fail.

But I think long term, I think it would be better to bundle this in, maybe it is something for v3 instead