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

[ThePaulMcBride]

Description
I'm having an issues with @hocuspocus/transformer. I am giving a valid minimal schema with valid content but I'm getting errors about duplicate imports of prosemirror-model.

Steps to reproduce the bug
I've created a little sandbox app, heres the link: https://replit.com/@ThePaulMcBride/HocuspocusTransformerError#index.js

Just run the app and you'll see the issues.

Expected behavior
It should return a yjs doc

Screenshot, video, or GIF

Additional context
This seems like it has been mentioned before, but the issue has been closed on the TipTap repo despite ongoing conversation.

ueberdosis/tiptap#577

[janthurau]

hey @ThePaulMcBride, thanks for the report and especially for the replit :)

I think this is caused by the transformer including @tiptap/starter-kit, which includes a few tiptap deps which then include prosemirror directly (not using peerDep).

Linking ueberdosis/tiptap#3209, which I've raised with the team.

Refs #417

[zanemcca]

I will just add this detail here because it is likely to be relevant for others who run into this problem. Webpack can be a bit dumb sometimes and it might end up building your app with both an esm and cjs copy of some prosemirror, yjs or tiptap library. These will also act like duplicate packages and there is no possible resolution with npm.

If you do face this problem your best friend will be webpack aliases which can be used to force usage of either esm or cjs. I am unsure about solutions for other build systems.

[ThePaulMcBride]

I've update this demo to the latest versions of Tiptap and Hocuspocus, but the error is idential. I'm also pretty sure it doesn't use a bundler at all. What would the fix be for this?

https://replit.com/@ThePaulMcBride/HocuspocusTransformerError

[zanemcca]

@ThePaulMcBride I wrote this script for myself to find duplicate prosemirror packages in the npm modules.

#!/bin/bash

duplicate_packages=`npm ls -s --parseable --all | grep -v @types | sed 's:.*/::' | grep prosemirror  | sort | uniq -d`

echo
if [ -z "$duplicate_packages" ]
then
    echo "No duplicate prosemirror packages found!"
    echo
else
    echo "Duplicate prosemirror packages were found!"
    full_package_paths=`npm ls --parseable --long $duplicate_packages`
    for package in $duplicate_packages
    do
        echo
        echo $package
        echo "$full_package_paths" | grep $package | sort -r
    done
    echo
    exit 1
fi

I believe the newest release of tiptap should be using peerDependencies now so you should be able to manually install the specific versions of the packages that you want. You should also use --prefer-dedupe when installing packages and you may also find it beneficial to purge your package-lock.json and node_modules to do a fresh install.

If you are not using npm workspaces to manage your project then you will likely be able to resolve any remaining issues with npm overrides.

If the script comes up clean and you still run into issues then it is likely an esm/cjs issue which would require a build system solution like the webpack aliases I referred to earlier.