TypeError: Cannot read property 'replaceChild' of null

rj-david commented

2019-07-14 12:00:28 +02:00

(Migrated from github.com)

Getting this error

/node_modules/prosemirror-menu/dist/index.js:542 Uncaught (in promise) TypeError: Cannot read property 'replaceChild' of null
    at new MenuBarView (/node_modules/prosemirror-menu/dist/index.js:542)
    at Object.view (/node_modules/prosemirror-menu/dist/index.js:527)
    at EditorView.updatePluginViews (/node_modules/prosemirror-view/dist/index.js:4481)
    at new EditorView (/node_modules/prosemirror-view/dist/index.js:4344)

Getting this error ``` /node_modules/prosemirror-menu/dist/index.js:542 Uncaught (in promise) TypeError: Cannot read property 'replaceChild' of null at new MenuBarView (/node_modules/prosemirror-menu/dist/index.js:542) at Object.view (/node_modules/prosemirror-menu/dist/index.js:527) at EditorView.updatePluginViews (/node_modules/prosemirror-view/dist/index.js:4481) at new EditorView (/node_modules/prosemirror-view/dist/index.js:4344) ```

nowakkamil commented

2021-05-21 01:00:07 +02:00

(Migrated from github.com)

I'm not sure if what I'm about to suggest would resolve this issue, but let's give it a shot. Are you sure that there is a div with editor id in your DOM? By default, document.querySelector("#editor") is invoked while setting up EditorView.

I'm not sure if what I'm about to suggest would resolve this issue, but let's give it a shot. Are you sure that there is a div with _editor_ id in your DOM? By default, `document.querySelector("#editor")` is invoked while setting up `EditorView`.

marijnh commented

2021-05-21 08:57:59 +02:00

(Migrated from github.com)

By default, document.querySelector("#editor") is invoked while setting up EditorView.

No, that's not accurate—the library will append to the element is it given, and doesn't hard-code any specific ids.

Not sure why I missed this issue initially. @rj-david Did you solve this? If not, you're going to have to provide more details.

> By default, document.querySelector("#editor") is invoked while setting up EditorView. No, that's not accurate—the library will append to the element is it given, and doesn't hard-code any specific ids. Not sure why I missed this issue initially. @rj-david Did you solve this? If not, you're going to have to provide more details.

nowakkamil commented

2021-05-21 15:56:30 +02:00

(Migrated from github.com)

Yes, I missed one crucial piece of information, and as such, my previous comment is not accurate. I wanted to point out that the code resulting in the error might have originated from the basic example. If so, it seems that the div with editor id was not present in DOM. I used the code snippet from the URL above and had an error with the same title. After adding a div with editor id to DOM prior to the script execution, the issue was resolved for me.

Yes, I missed one crucial piece of information, and as such, my previous comment is not accurate. I wanted to point out that the code resulting in the error might have originated from the [basic example](https://prosemirror.net/examples/basic/). If so, it seems that the div with _editor_ id was not present in DOM. I used the code snippet from the URL above and had an error with the same title. After adding a div with _editor_ id to DOM prior to the script execution, the issue was resolved for me.

Rene-Montes commented

2021-06-16 18:04:10 +02:00

(Migrated from github.com)

We are hitting this constantly in production (we are working on a different editor that doesn't use prosemirror-menu):

+-----------------------------------------------------------------------+-------------------------------------------------------------+------+--------+
| function                                                              | file                                                        | line | column |
+-----------------------------------------------------------------------+-------------------------------------------------------------+------+--------+
| editorView.dom.parentNode.replaceChild(this.wrapper, editorView.dom); | webpack:///./node_modules/prosemirror-menu/dist/index.es.js | 670  | 28     |
| return new MenuBarView(editorView, options);                          | webpack:///./node_modules/prosemirror-menu/dist/index.es.js | 653  | 13     |
| this.pluginViews.push(plugin.spec.view(this));                        | webpack:///./node_modules/prosemirror-view/dist/index.es.js | 6771 | 42     |
| this.updatePluginViews();                                             | webpack:///./node_modules/prosemirror-view/dist/index.es.js | 6584 | 7      |
| let view = new EditorView(editor, {                                   | webpack:///./app/javascript/etc/prosemirror.js              | 16   | 15     |
| document.querySelectorAll('.markdown-content').forEach(mdc => {       | webpack:///./app/javascript/etc/prosemirror.js              | 12   | 49     |
| }), (null != u ? u : document).dispatchEvent(i), i;                   | webpack:///./node_modules/turbolinks/dist/turbolinks.js     | 75   | 39     |
| return null == t && (t = {}), e.dispatch("turbolinks:load", {         | webpack:///./node_modules/turbolinks/dist/turbolinks.js     | 994  | 42     |
| return this.notifyApplicationAfterPageLoad(t.getTimingMetrics());     | webpack:///./node_modules/turbolinks/dist/turbolinks.js     | 1007 | 22     |
+-----------------------------------------------------------------------+-------------------------------------------------------------+------+--------+

We are hitting this constantly in production (we are working on a different editor that doesn't use prosemirror-menu): ``` +-----------------------------------------------------------------------+-------------------------------------------------------------+------+--------+ | function | file | line | column | +-----------------------------------------------------------------------+-------------------------------------------------------------+------+--------+ | editorView.dom.parentNode.replaceChild(this.wrapper, editorView.dom); | webpack:///./node_modules/prosemirror-menu/dist/index.es.js | 670 | 28 | | return new MenuBarView(editorView, options); | webpack:///./node_modules/prosemirror-menu/dist/index.es.js | 653 | 13 | | this.pluginViews.push(plugin.spec.view(this)); | webpack:///./node_modules/prosemirror-view/dist/index.es.js | 6771 | 42 | | this.updatePluginViews(); | webpack:///./node_modules/prosemirror-view/dist/index.es.js | 6584 | 7 | | let view = new EditorView(editor, { | webpack:///./app/javascript/etc/prosemirror.js | 16 | 15 | | document.querySelectorAll('.markdown-content').forEach(mdc => { | webpack:///./app/javascript/etc/prosemirror.js | 12 | 49 | | }), (null != u ? u : document).dispatchEvent(i), i; | webpack:///./node_modules/turbolinks/dist/turbolinks.js | 75 | 39 | | return null == t && (t = {}), e.dispatch("turbolinks:load", { | webpack:///./node_modules/turbolinks/dist/turbolinks.js | 994 | 42 | | return this.notifyApplicationAfterPageLoad(t.getTimingMetrics()); | webpack:///./node_modules/turbolinks/dist/turbolinks.js | 1007 | 22 | +-----------------------------------------------------------------------+-------------------------------------------------------------+------+--------+ ```

marijnh commented

2021-06-17 09:53:53 +02:00

(Migrated from github.com)

That would happen when you create an editor that isn't in the DOM. We could add a condition to not call replaceChild in that situation, but that would mean you wouldn't see the menu bar, which is probably also not what you're looking for. So for now my advice would be to make sure you're not using the menu with 'detached' editors (that were created with null as first constructor argument)

That would happen when you create an editor that isn't in the DOM. We could add a condition to not call `replaceChild` in that situation, but that would mean you wouldn't see the menu bar, which is probably also not what you're looking for. So for now my advice would be to make sure you're not using the menu with 'detached' editors (that were created with null as first constructor argument)

Rene-Montes commented

2021-06-19 17:21:34 +02:00

(Migrated from github.com)

Probably would have saved us time if it just said that I was missing an editorView element :) We were unintentionally initializing an editor without an element

👍 1

Rows
Columns

TypeError: Cannot read property 'replaceChild' of null #22