Debugging an in-browser use of ProseMirror

1

Hi, I’ve been noticing some errors in the console together with flickering text in the simplest possible ProseMirror example I’ve been able to come up with:

I put together a self-contained reproduction in the Observable notebook above — any pointers to resolving the issue would be appreciated. The error says that multiple versions of prosemirror-model were used, but I checked the package.jsons for the various ProseMirror packages I’m using and failed to see any conflicts.

I see a similar issue in this thread, but when I look at the example myself I do not see the error.

Any insight or advice would be greatly appreciated, and thank you for all of your excellent work on ProseMirror (and your book)!

2

The error says that multiple versions of prosemirror-model were used, but I checked the package.jsons for the various ProseMirror packages I’m using and failed to see any conflicts.

Often, though technically they shouldn’t, both npm and yarn will create trees with unnecessary duplicated packages when incrementally upgrading dependencies. Often, reinstalling (removing package locks and node_modules) fixes this.

But here you may be using Observable’s dependency management? I don’t know anything about how that works, so maybe the observation above isn’t relevant.

1 Like
3

Hi Marijn,

Thank you – I was able to figure it out by bundling together the modules myself using esbuild. I created a new npm project, installed the modules, then used this as an entry point file entry.js

module.exports.PMModel = require('prosemirror-model');
module.exports.PMState = require('prosemirror-state');
module.exports.PMView = require('prosemirror-view');
module.exports.PMSchema = require('prosemirror-schema-basic');

and bundled them together into a single ES module by running the following command:

./node_modules/.bin/esbuild --bundle entry.js --format=esm --outfile=out.js

You can see the working results at my original link. :slight_smile: