reactjs - React component update (hot reload/refresh) causes error - removeChild & insertBefore error when updating the code

Question

I haven't updated my code for a few months. Just cloned it and installed the packages.

Now I get this error when I change my code and hot reload/refresh tried to update my DOM.

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

When I update:

<ul className={props.annotations.drawingEnabled ? 'absolute active' : 'absolute active'}>
    <li>
        <i className="far fa-undo" /> undo
    </li>
</ul>

to:

<ul className={props.annotations.drawingEnabled ? 'absolute active' : 'absolute active'}>
    <li>
        something_new_at_this_place <i className="far fa-undo" /> undo
    </li>
</ul>

This happened also with SimpleBar https://github.com/Grsmto/simplebar/issues/548

I never had these problems before, now I am really confused. Also tried older Node versions and tested older commits. Appears in Firefox and in Chrome.

FAST_REFRESH=false @ .env works, but the whole site reloads on a code update.

Removing these two imports solved the issue:

import '@mygit/fontawesome-pro/js/all.js';
import 'simplebar';

But why did it worked before?

question from:https://stackoverflow.com/questions/65947234/react-component-update-hot-reload-refresh-causes-error-removechild-insertb

Answer 1

Waitting for answers