TypeError: Cannot read property 'replaceChild' of null about prosemirror-menu

[Rene-Montes]

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

[nowakkamil]

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]

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]

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.

[Rene-Montes]

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]

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)