RangeError: Adding different instances of a keyed plugin (plugin$)

See original GitHub issue

Summary

I’ve done all the steps that is provided in this tutorial and when i want to load the editor im getting this error:

RangeError: Adding different instances of a keyed plugin (plugin$)

Steps to reproduce

Install modules:

yarn add remirror @remirror/react @remirror/pm

Create MyEditor.js

import 'remirror/styles/all.css';

import { BoldExtension } from 'remirror/extensions';
import { EditorComponent, Remirror, useRemirror } from '@remirror/react';

const Menu = () => <button onClick={() => alert('TBD')}>B</button>;

export const MyEditor = () => {
  const { manager, state } = useRemirror({
    extensions: () => [new BoldExtension()],
    content: '<p>I love <b>Remirror</b></p>',
    selection: 'start',
    stringHandler: 'html',
  });

  return (
    <div className='remirror-theme'>
      <Remirror manager={manager} initialContent={state}>
        {/* The text editor is placed above the menu to make the zIndex easier to manage for popups */}
        <EditorComponent />
        <Menu />
      </Remirror>
    </div>
  );
};

Expected results

See the editor on my page.

Actual results

RangeError: Adding different instances of a keyed plugin (plugin$)

When i inspect code i see that there is twice an plugin$ in an array:

// /src/state.js:183 static create(config);
// config.plugins =
0: Object { props: {}, spec: {…}, key: "schema$" }
1: Object { props: {}, spec: {…}, key: "plugins$" }
2: Object { props: {}, spec: {…}, key: "commands$" }
3: Object { props: {…}, spec: {…}, key: "events$" }
4: Object { props: {…}, spec: {…}, key: "reactPlaceholder$" }
5: Object { spec: {…}, props: {…}, key: "history$" }
6: Object { spec: {…}, props: {…}, key: "plugin$" }
7: Object { spec: {…}, props: {…}, key: "plugin$1" }
8: Object { props: {…}, spec: {…}, key: "pasteRule$" }
9: Object { props: {…}, spec: {…}, key: "nodeViews$" }
10: Object { props: {…}, spec: {…}, key: "suggest$" }
11: Object { props: {…}, spec: {…}, key: "remirroFilePlaceholderPlugin$" }
12: Object { spec: {…}, props: {…}, key: "plugin$" }
13: Object { props: {…}, spec: {…}, key: "decorations$" }
length: 14


Version: Node v16; React 17; remirror 1.0.89

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:6
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

3reactions
ocavuecommented, Aug 5, 2022

image

I can reproduce it. The reason is that Yarn installed two different versions of prosemirror-model.

For now, temporary workaround would be using yarn-deduplicate to reduce duplicate packages in yarn.lock. Make sure you are adding --strategy fewer.

$ npm install -g yarn-deduplicate
$ yarn-deduplicate --strategy fewer
$ yarn install 

CC @whawker

0reactions
ocavuecommented, Sep 20, 2022

This should be fixed with remirror v2.

Read more comments on GitHub >

github_iconTop Results From Across the Web

RangeError: Adding different instances of a keyed plugin ...
I'm loading plugins dynamically using ES6 dynamic imports. My API entry is through tiptap v2. What I'm now noticing that whenever I add...
Read more >
RangeError: Adding different instances of a keyed plugin ...
the error is thrown by the prosemirror-state module, inside its EditorState.create method and the Configuration constructor, because 2 plugins ...
Read more >
Editor raises a bunch of weird errors and does not render
Hi! I am trying to implement the very basic example: import { Editor } from '@atlaskit/editor-core'; <Editor /> At first it was failing ......
Read more >
TipTap / Grant Nestor
viewof editor = RangeError: Adding different instances of a keyed plugin (plugin$). RuntimeError: Adding different instances of a keyed plugin (plugin$).
Read more >
Plugins don't work with multiple instances of CKEditor4 in ...
Vue needs a key to differentiate different instances of the same component. The same you will do in a v-for. I think you...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found