Provide compatibility with Gatsby v5

[aldozumaran]

[bendeve]

Since it's done, how can we make the plugins works with v5 ?
Thx

[witcradg]

It does work with Gatsby 5, HOWEVER:
When I switched to React 18 as part of my upgrade to Gatsby 5, I started seeing a lot of React #418 and #423 errors in devtools console. As I understand it, this is a result of React 18 being stricter than React 17. I've traced this to my use of gatsby-background-image. These errors do not show in the console when using "gatsby develop" but the do appear when serving up a "gatsby build".

This does not appear to be causing issues with the visual presentation, but it is a nuisance when trying to use the console.

Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
...
at MessagePort.R (framework-3564d5791eb56ca09386.js:2:208129)
framework-3564d5791eb56ca09386.js:2 Uncaught Error: Minified React error #423; visit https://reactjs.org/docs/error-decoder.html?invariant=423 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
...
at S (framework-3564d5791eb56ca09386.js:2:207597)
at MessagePort.R (framework-3564d5791eb56ca09386.js:2:208129)

[aldozumaran]

@witcradg

I have this error!

[witcradg]

@aldozumaran
I'm no expert, but make sure you're running v18 of node and update all your packages. I use npm-check-updates for the latter to make it easy. I use node version manager for the former.

Then you should
npm install --legacy-peer-deps

[Maclay74]

@witcradg hey, did you manage to fix those react 18 errors or find a workaround?
I think it's because it puts a style inside a div.

[zamson]

Also seeing these errors in react 18 and gatsby v5 – any ideas on how to fix it?

[witcradg]

@Maclay74 @zamson I'm not seeing the errors reported by @aldozumaran but I do still have the console errors reported in my original post.
These errors look to me like problems with either packages in packages.json needing updated or in the environment not running node 18. My bash build environment reports these build ERR issues as warnings in the build process; not errors.

Make sure you are installing with npm install packagename --legacy-peer-deps

[github-actions]

Hi there!
As @timhagn momentarily is the main contributor to this package, this issue
has been automatically marked as stale because it has not had
any recent activity.
It will be closed if no further activity occurs, though we're open to
suggestions on how to get more maintainers!
Thank you for your contributions : )!

[badger3000]

@witcradg Yep, I am also seeing React error https://reactjs.org/docs/error-decoder.html/?invariant=418 , and only with the production build ( not while running develop) . React is complaining about source order and looking at the compiled code, I think @Maclay74 might be right, with the nested style tag. Everything else in my build seems to be in the proper order. I believe this is also causing multiple re-renders on page load, as the error gets printed out twice in the console.

[dimileeh]

I'm also getting SSR errors in DEV specifically in the BackgroundImage component, and I also suspect it has to do with styles inside a div.

And the error message in the console:
Prop 'dangerouslySetInnerHTML' did not match. Server: " .MuiGrid-root.MuiGrid-item.<...>" Client: " .MuiGrid-root.MuiGrid-item. <...> background-image: url(data:image/jpeg;base64,/9j/2wBDABALDA<...>" at style at div at BackgroundImage

If you don't see such errors in DEV but only see them on PROD builds, try enabling the DEV_SSR flag in yourgatsby-config.js.

[velser]

Same hydration issue here after updating to Gatsby 5 and react 18. Could be ignored but when using logging systems which handle errors and warnings in frontend it's annoying as hell...

[Maclay74]

@timhagn is there anything we can do to resolve it?

[michaelprflores]

I was able to use the solution above to get the plugin working locally. However, upon deploying to Netlify, it errors out with the following information. I don't think this issue should be marked stale.

10:43:29 AM: Installing npm packages using npm version 8.19.2
10:43:31 AM: npm ERR! code ERESOLVE
10:43:31 AM: npm ERR! ERESOLVE could not resolve
10:43:31 AM: npm ERR!
10:43:31 AM: npm ERR! While resolving: gatsby-background-image@1.6.0
10:43:31 AM: npm ERR! Found: gatsby@5.6.0
10:43:31 AM: npm ERR! node_modules/gatsby
10:43:31 AM: Failed during stage 'building site': Build script returned non-zero exit code: 1 (https://ntl.fyi/exit-code-1)
10:43:31 AM: npm ERR!   gatsby@"^5.6.0" from the root project
10:43:31 AM: npm ERR!   peer gatsby@"^5.0.0-next" from babel-plugin-remove-graphql-queries@5.6.0
10:43:31 AM: npm ERR!   node_modules/babel-plugin-remove-graphql-queries
10:43:31 AM: npm ERR!     babel-plugin-remove-graphql-queries@"^5.6.0" from gatsby@5.6.0
10:43:31 AM: npm ERR!     babel-plugin-remove-graphql-queries@"^5.6.0" from gatsby-plugin-image@3.6.0
10:43:31 AM: npm ERR!     node_modules/gatsby-plugin-image
10:43:31 AM: npm ERR!       gatsby-plugin-image@"^3.5.0" from the root project
10:43:31 AM: npm ERR!     1 more (gatsby-plugin-typescript)
10:43:31 AM: npm ERR!   12 more (gatsby-plugin-image, gatsby-plugin-manifest, ...)
10:43:31 AM: npm ERR!
10:43:31 AM: npm ERR! Could not resolve dependency:
10:43:31 AM: npm ERR! peer gatsby@"^2.0.0 || ^3.0.0 || ^4.0.0" from gatsby-background-image@1.6.0
10:43:31 AM: npm ERR! node_modules/gatsby-background-image
10:43:31 AM: npm ERR!   gatsby-background-image@"^1.6.0" from the root project
10:43:31 AM: npm ERR!
10:43:31 AM: npm ERR! Conflicting peer dependency: gatsby@4.25.4
10:43:31 AM: npm ERR! node_modules/gatsby
10:43:31 AM: npm ERR!   peer gatsby@"^2.0.0 || ^3.0.0 || ^4.0.0" from gatsby-background-image@1.6.0
10:43:31 AM: npm ERR!   node_modules/gatsby-background-image
10:43:31 AM: npm ERR!     gatsby-background-image@"^1.6.0" from the root project

[velser]

Being tired of getting frontend errors to error monitoring, I've had to switch to a lazy-load background solution with image element using Dynamic Gatsby image with absolute and grid positioning of a content, as I was not able to find a quick solution due to how this plugins works with modifications of an element via style prop, which is definitely triggering react 18 hydration errors(not even warnings)...