React: Duplicate elements showing up on back press

[marcellino-ornelas]

Description

Just had the weirdest bug right now in my extension where pressing the back button would trigger duplicate elements to appear 🤔

we just do a basic onMount and onRemove logic.

        const ui = createIntegratedUi(ctx, {
            position: 'inline',
            anchor: '#start-of-content',
            append: 'after',
            onMount(container) {
                const root = ReactDOM.createRoot(container);
                root.render(
                    <Component />
                );
                return { root, container };
            },
            onRemove: (elements) => {
                elements?.root.unmount();
        });

All other actions like page refresh and FE navigation work tho! no problems and no duplicate elements. But the moment we pressed the back buttons, we got duplicates 🤔

I tried lots of things like removing the container in the onRemove function which didn't work. I would log out elements before and after the elements?.container.remove(); and the div would always stay. its like the container was a old reference or something 🤔 or maybe when pressing back it no longer was considered in the DOM.

Anyways wanted to share because I finally got it working by forcefully deleting all wxt divs with the following:

          onRemove: (elements) => {
                elements?.root.unmount();
                elements?.container.remove();
                // Force remove any remaining elements
                document
                    .querySelectorAll('[data-wxt-integrated]')
                    .forEach((el) => el.remove());
            },

Probably a better solution to this but for now this works 🙌🏽

[marcellino-ornelas]

Closing because I think this is a bug

#1816