Gatsby 3: gatsby-plugin-image partially rerendering images

Description

We migrated to gatsby3 and to the new gatsby-plugin-image. Everything works fine except the following issue:

There is 48 cards with GatsbyImage component. The cards with the images are rendered just fine, but after clicking sort by, the page is re-rendered and some cards are empty, gatsby-image-wrapper is empty, which means that GatsbyImage is not re-rendered and the following error is shown in the console:

DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

Steps to reproduce

https://603fcf118d59a000077eecb0--gatsbys-adika-torefront.netlify.app/categories/clothing__tops__all/

click on sort by , or another filter

Here is minimal example repo: https://github.com/creotip/gatsby-3-images-error

Expected result

Should re-render images

Actual result

Partiallly re-rendered images

Environment

System: OS: macOS 11.1 CPU: (8) x64 Intel® Core™ i5-1038NG7 CPU @ 2.00GHz Shell: 5.8 - /bin/zsh Binaries: Node: 14.15.3 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 6.14.9 - /usr/local/bin/npm Languages: Python: 2.7.16 - /usr/bin/python Browsers: Chrome: 89.0.4389.72 Firefox: 86.0 Safari: 14.0.2 npmPackages: gatsby: ^3.0.0 => 3.0.0 gatsby-image: ^3.0.0 => 3.0.0 gatsby-plugin-image: ^1.0.0 => 1.0.0 gatsby-plugin-lodash: ^4.0.0 => 4.0.0 gatsby-plugin-manifest: ^3.0.0 => 3.0.0 gatsby-plugin-material-ui: ^2.1.10 => 2.1.10 gatsby-plugin-offline: ^4.0.0 => 4.0.0 gatsby-plugin-react-helmet: ^4.0.0 => 4.0.0 gatsby-plugin-react-svg: ^3.0.0 => 3.0.0 gatsby-plugin-remove-fingerprints: 0.0.2 => 0.0.2 gatsby-plugin-resolve-src: ^2.1.0 => 2.1.0 gatsby-plugin-root-import: ^2.0.6 => 2.0.6 gatsby-plugin-sharp: ^3.0.0 => 3.0.0 gatsby-plugin-styled-components: ^4.0.0 => 4.0.0 gatsby-source-filesystem: ^3.0.0 => 3.0.0 gatsby-transformer-sharp: ^3.0.0 => 3.0.0

[ascorbic]

Could everyone who experienced this please install gatsby-plugin-image@1.4.0-next.1 and see if it fixes it.

[philr35]

I just started getting Target container is not a DOM element. all over my app, same as @popeating

react-dom.development.js:26091 Uncaught (in promise) Error: Target container is not a DOM element.
    at render (react-dom.development.js:26091)
    at m (lazy-hydrate.tsx:91)
    at eval (gatsby-image.browser.tsx:92)

I’m using gatsby-plugin-image: ^1.2.0-next.0 => 1.2.0

---

edit: Upgrading to gatsby-plugin-image: ^1.3.0-next.1 => 1.3.0-next.1 did not work.

---

edit: Downgrading to gatsby-plugin-image: 1.1.2 => 1.1.2 WORKED!

Conclusion:

The error only comes up when images are being unmounted dynamically. In my case applying an image filter which dynamically renders new images and unmounts the old ones. This was quite difficult to debug since the error itself gives not hints into what is actually the problem.

Quick fix:

Downgrade to gatsby-plugin-image@1.1.2