Invariant Violation: ReactMount: Two valid but unequal nodes with the same data-reactid

[csk157]

Hello,

I have noticed a bunch of errors when using the editor with Snow theme, happening when, for example, moving mouse over dropdown type toolbar items:

Uncaught Error: Invariant Violation: ReactMount: Two valid but unequal nodes with the same `data-reactid`: .0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Size

Uncaught Error: Invariant Violation: ReactMount: Two valid but unequal nodes with the same `data-reactid`: .0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Size

Uncaught Error: Invariant Violation: ReactMount: Two valid but unequal nodes with the same `data-reactid`: .0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Font

Uncaught Error: Invariant Violation: ReactMount: Two valid but unequal nodes with the same `data-reactid`: .0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Font

<span class="ql-format-group" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats">
  <span class="ql-font ql-picker" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Font"><span class="ql-picker-label" data-value="sans-serif">Sans Serif</span><span class="ql-picker-options"><span data-value="sans-serif" class="ql-picker-item ql-selected">Sans Serif</span><span data-value="serif" class="ql-picker-item">Serif</span><span data-value="monospace" class="ql-picker-item">Monospace</span></span></span>
  <select class="ql-font" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Font" style="display: none;">
    <option value="sans-serif" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Font.$Sans Serif">Sans Serif</option>
    <option value="serif" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Font.$Serif">Serif</option>
    <option value="monospace" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Font.$Monospace">Monospace</option>
  </select>
  <span class="ql-format-separator" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.1"></span><span class="ql-size ql-picker" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Size"><span class="ql-picker-label" data-value="10px">Normal</span><span class="ql-picker-options"><span data-value="10px" class="ql-picker-item ql-selected">Normal</span><span data-value="13px" class="ql-picker-item">Smaller</span><span data-value="18px" class="ql-picker-item">Larger</span><span data-value="32px" class="ql-picker-item">Huge</span></span></span>
  <select class="ql-size" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Size" style="display: none;">
    <option value="10px" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Size.$Normal">Normal</option>
    <option value="13px" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Size.$Smaller">Smaller</option>
    <option value="18px" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Size.$Larger">Larger</option>
    <option value="32px" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Size.$Huge">Huge</option>
  </select>
  <span class="ql-format-separator" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.3"></span><span class="ql-align ql-picker" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Alignment"><span class="ql-picker-label" data-value="center"></span><span class="ql-picker-options"><span data-value="center" class="ql-picker-item ql-selected"></span><span data-value="left" class="ql-picker-item"></span><span data-value="right" class="ql-picker-item"></span><span data-value="justify" class="ql-picker-item"></span></span></span>
  <select class="ql-align" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Alignment" style="display: none;">
    <option value="center" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Alignment.$center"></option>
    <option value="left" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Alignment.$left"></option>
    <option value="right" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Alignment.$right"></option>
    <option value="justify" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Alignment.$justify"></option>
  </select>
</span>

I think that it happens because the theme adds with customised spans for each select and copies all their attributes.

This does not affect the functionality of the plugin it seems.

[pavelvlasov]

@csk157 this issues is more related to the quill.

[zenoamaro]

Do you still experience this issue with the latest react-quill?

[csk157]

Well, we have just spent some more time investigating and figured out that the errors were caused by another component that has an element with onMouseEnter and/or onMouseLeave attached.

Basically, if there is any element with onMouseEnter or onMouseLeave these errors would appear when moving mouse over the toolbar items with duplicated reactid (element not overlapping with the editor). It seems that React only notices duplicates when it is handling these(maybe some other as well?) events.

So, yes, there is still an issue (in the new version too), but I don't know if it could/should be solved here, since it is quill theme that is copying all the attributes of an element (including reactid), but I don't think that it belongs to quill either (it does not relate to React in any way, why should it handle this case separately).

P.S. errors are not shown when using the production version of React, as it disables the assertions. It is more of an annoyance to see the console full of red text when developing.

[zenoamaro]

Thanks for the troubleshooting. I wasn't able to reproduce it since I was able to have the multiple react-id co-exist (risky, but the toolbar was only getting rendered once) but the picture is clearer now.

I still think this should be fixed. React-Quill is wrapping Quill and so it should take care of everything.

Quill gets complete control of the toolbar and the editor anyway, so I believe using renderToStaticMarkup to render them would be the correct thing to do in any case.

There is already a render which wraps the actual rendering, so it should be a matter of using renderToStaticMarkup and __dangerouslySetInnerHTML and test. Custom controls should continue to work normally if they have no logic.

[zenoamaro]

The toolbar is now rendered as static markup, so no react-ids are generated for it and by consequence there are also no duplicate id warnings. Functionally nothing should change, unless you used a custom Toolbar component, in which case the same technique should be applied there.

This should fix the issue, but let me know if otherwise.