Tiptap: [Question] How to fix "Duplicate use of selection JSON ID cell" error?

[matticustard]

Describe the bug
As soon as I attempt to load the tiptap-extensions module using the example in the "Avaiable Extensions" section of the README, I receive the error: "Uncaught RangeError: Duplicate use of selection JSON ID cell." This is in reference to a line of code: "prosemirrorState.Selection.jsonID("cell", CellSelection);"

I'm hoping there's something simple I'm overlooking, because I can't seem to find anyone else with this issue.

Steps to Reproduce
I have installed the tiptap and tiptap-extensions modules.
I also installed the prosemirror-tables module based on NPM's insistence.

The main tiptap module works fine when I create a simple editor-content component, as in the README.

However, as soon as I attempt to load the tiptap-extensions module, I receive the error: "Uncaught RangeError: Duplicate use of selection JSON ID cell." This is in reference to a line of code somewhere that reads: "prosemirrorState.Selection.jsonID("cell", CellSelection);"

What have I done to try to fix this issue?

• I uninstalled and reinstalled the modules.
• I have updated all other node modules.
• I have tried removing and recreating the node_modules folder.
• I have tried making the editor the only defined Vue component (commented out all others temporarily).
• I have looked online for hours for a solution, whether with tiptap or prosemirror, and have been unsuccessful.

Expected behavior
For the editor to be able to load with extensions and menu.

Environment (local)

• Windows 10
• Chrome
• Version 74.0.3729.131
• Desktop

Environment (remote)

• CentOS 6.10
• Laravel 5.8
• Webpack (via Laravel Mix)

[Auxxxxlx]

I met this error before，and fixed it by deleting node_modules and reinstalling the dependences.

[philippkuehn]

this is a version problem. why do you installed prosemirror-tables?

[matticustard]

why do you installed prosemirror-tables?

Because I received this message upon installing tiptap:

npm WARN [email protected] requires a peer of prosemirror-tables@^0.7.9 but none is installed. You must install peer dependencies yourself.

And if I don't install it, I get this message from webpack:

ERROR in ./node_modules/prosemirror-utils/dist/index.js
Module not found: Error: Can't resolve 'prosemirror-tables' in '/home/...

[philippkuehn]

Hmm this is strange, because prosemirror-tables is already a dependency of tiptap-extensions.

[matticustard]

Just tried installing tiptap-extensions without prosemirror-tables installed to see if it would load the dependencies as you mention it should, but it gives the same error.

npm install tiptap-extensions
npm WARN [email protected] requires a peer of prosemirror-tables@^0.7.9 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ [email protected]
added 9 packages from 270 contributors and audited 29151 packages in 12.765s

[matticustard]

So despite the error, it does seem to be working now. I guess I should have just ignored the warning in the first place. Thanks for your help!

[JeffersonOndzeMangha]

I am facing this issue, none of the above comments fixed the issue, is there a more concrete response?

[mdtomo]

I had the same issue. Delete your node_modules directory, package.json.lock file and remove any references to prosemirror-tables from package.json. Then npm install. That fixed my problem.

[lpellis]

I also ran into this issue, what fixed it for me was installing with yarn instead of npm ¯_(ツ)_/¯

[andreasvirkus]

The same error is also on the official Codesandbox that is linked to when creating a new issue

https://codesandbox.io/s/qxv5m9y6oq

[gavinhewitt]

Having the same issue. I can't find anywhere where there's a call for a different version.

As a quick (but obviously unsustainable) fix I edit the file generated by webpack and remove the duplicate code.

[mojtabaahn]

I think this needs to re-open. just installed tiptap-extensions and same error appeares!

[vssoft]

Fixed error "Duplicate use of selection JSON ID cell":

In my vuejs project I had installed:
npm install --save [email protected]
(with WARN [email protected] requires a peer of prosemirror-tables@^0.9.1 but none is installed)
npm install --save [email protected]
(with the same WARN)
(Ignored both WARNs)
When routing to page containing Tiptap, I got error "Duplicate use of selection JSON ID cell"
To fix it:
Went to .../myproject/node_modules/tiptap-extensions/ and renamed subfolder '/node-modules' to '/node-modules--'
Recompiled the project and got no error this time.
Explained:
Folder .../myproject/node_modules/ contains subfolder '/prosemirror-tables' (version 1.1.1)
Folder .../myproject/node_modules/tiptap-extensions/node-modules/ contains subfolder '/prosemirror-tables' (version 1.0.0)
Loading duplicated modules with different versions raises the error.

[hanspagel]

This shouldn’t be an issue anymore with the recent release. 🙃

Happy to reopen, when someone encounters this issue again.

[peterkruty]

I just tried to upgrade and have the same problem.

vue-router.esm.js?85f8:2128 RangeError: Duplicate use of selection JSON ID cell
    at Function.jsonID (index.es.js?ed9c:188)
    at eval (index.es.js?d5b1:708)
    at Module../node_modules/tiptap-extensions/node_modules/prosemirror-tables/dist/index.es.js (vendor.js:15211)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at eval (extensions.esm.js?6301:1)
    at Module../node_modules/tiptap-extensions/dist/extensions.esm.js (vendor.js:15199)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at eval (index.js?!./node_modules/@quasar/app/lib/webpack/loader.auto-import-client.js?kebab!./node_modules/vue-loader/lib/index.js?!./src/pages/auth/EvidenceBacklog-copy.vue?vue&type=script&lang=js&:7)

But the fix from @vssoft worked just fine.

[DanieleSpera]

Same here

On installation:
npm WARN [email protected] requires a peer of prosemirror-tables@^0.9.1 but none is installed. You must install peer dependencies yourself.

On Extensions installation:
Uncaught RangeError: Duplicate use of selection JSON ID cell
at Function.jsonID (index.es.js?5313:188)
at eval (index.es.js?41dd:582)
at Module../node_modules/tiptap-extensions/node_modules/prosemirror-tables/dist/index.es.js (chunk-vendors.js:10616)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at eval (extensions.esm.js?f23d:1)
at Module../node_modules/tiptap-extensions/dist/extensions.esm.js (chunk-vendors.js:10592)
at __webpack_require__ (app.js:849)
at fn (app.js:151)

I'm using vue 2.6.12 and vuetify 2.3.15