RangeError: Adding different instances of a keyed plugin (plugin$)
See original GitHub issueSummary
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:
- Created a year ago
- Reactions:6
- Comments:9 (4 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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.CC @whawker
This should be fixed with remirror v2.