Weird problem in latest gatsby-plugin-image - root.current is null

[nrandell]

I'm seeing a really weird issue in the latest gatsby-plugin-image (2.14)

For most images all is fine, but occasionally I'm seeing an error in the GatsbyImageHydrator.

For some of the images root.current is null in

gatsby/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx

Line 154 in 15a3fbf

root.current.innerHTML = renderImageToString({

I've done some tweaks locally and the page appears to work ok if I check that root.current is actually set as in line 163 (

gatsby/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx

Line 163 in 15a3fbf

if (root.current) {

)

However I've really struggled to create a minimal reproduction. I've got a small project that loads some images, even loads a few hundred images and still works correctly.

[roffelsaurus]

I did a little digging today in attempts at isolating props/usage behaviour, but to no avail.

I can't really understand how root.current could be null at any time, since it doesn't seem to have any conditional rendering. That leads me to believe it is caused by parent components unmounting GatsbyImage temporarily while the erroring Promise.then resolves. That would also explain why it is not a widespread reported problem, since that would be pretty rare.

Unfortunately I could not prove this even though I attempted various stuff, like doing React.memo on some parents, removing some useEffects etc.

To add some context for our environment which could be relevant, we are using sanity(through gatsby-source-sanity 7.4.2) and styled-components 5.3.3.

I will stay on the last known good version 2.13 for a month or two in hopes that this magically gets fixed, but if not I will dedicate the time required to fix it.

[bever1337]

Downgrading to 2.13.0 solved the issue for us. We had a tangential issue which was bad gatsbyImageData queries. They produced similar errors but were unrelated.

[zamson]

Same issue here (2.15.0), will be downgrading for now

On a new Gatsby install with two images fetched with the WordPress source plugin. build works but develop gives the error

Error in function eval in ./node_modules/gatsby-plugin-image/dist/index.browser-cdba1a30.js:154
Cannot set properties of null (setting 'innerHTML')

[CesarBenavides777]

Downgrading didn't fix it for me, also tried 2.12.0 & 2.12.1

[zamson]

@CesarBenavides777 make sure to empty build cache... I also did this rm -rf node_modules && yarn

[CesarBenavides777]

@zamson still didn't do it for me, I think it only shows on mobile for me too.

[jehns]

same boat - downgrade didn't fix the issue for me.

[wardpeet]

Is there any reproduction available? Or is it randomly happening? I think I know where the problem lies but want to make sure I can test it

[nrandell]

I've tried to create a reproduction but failed. I've got about 10 gatsby projects, most seem ok, but one isn't. I've copied bits of code from the failing one to my repro, but that failed. Since then I've been using the latest on all the projects I touch to see if there is a failure and have so far not seen it.

One thing I did in the failing project was modify the node_modules version to do the check for the existence of root.current before using it and found that my failing project worked perfectly.

As for why root.current is null - no idea.

Unfortunately my failing project is a customer site so I can't share the code.

[es-ki]

A repository has been created where the phenomenon can be confirmed.
https://github.com/Sakaki-Ya/gatsby-image-test.git

This repository uses react-masonry-css.
When I stopped using react-masonry-css, the error stopped appearing.

[stldo]

react-masonry-css is causing this issue here too. Downgrading to 2.13.0 also solved the issue.

[roffelsaurus]

I do not have react-masonry-css and still have the error. Good job with the reproduction repo. Must be a shared pattern in how that lib and many others use gatsby img man. 6. jun. 2022 kl. 00:09 skrev stldo ***@***.***>:

…

react-masonry-css is causing this issue here too. — Reply to this email directly, view it on GitHub <#35656 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAKOKWIK3A7AYIQIHMJDJDTVNUQPXANCNFSM5V5CVXXQ> . You are receiving this because you commented.Message ID: ***@***.***>

[stldo]

react-masonry-css doesn't seem to use GatsbyImage directly. This error happens when GatsbyImage is a child of the react-masonry-css component — not a direct child, but inside another component. Moreover, it's happening here only on development, on the first load. After hot-reloading is triggered, it doesn't throw errors anymore. It doesn't throw any errors on production too.

[nrandell]

We're using tailwindcss. Some of our projects are working ok, others aren't so I haven't been able to find a pattern to reproduce it yet.

[KyleAMathews]

Perhaps there's a bug where the image component is removed by a parent but there's some code in the component which still runs.

[rub1e]

I've made a basic reproduction here

I can't say I understand what's actually going on, but it's as Kyle says, the bug happens if the image is removed before it's finished loading.

It's very easy to recreate - just render an image and remove it after 1ms

[Khaledgarbaya]

This will be fixed in this PR #35878

[SebastianMera]

Still not fixed.