Provide compatibility with Gatsby v5

[aldozumaran]

No description provided.

[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)...

[yianan261]

I am facing the same compatibility issue as well with Gatsby v5 and React 18. I don't think this issue should be marked stale as well as it seems that several others are still facing this issue.

[bryantabaird]

I've been stuck on this as well, only to discover the broader gatsby-plugin-image might support this already?

https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image/#background-images

Is there anything that this plugin offers that that other plugin does not?

[sparker888]

Yeah, this stinks. I wasted a bunch of time on this v5 implementation only to run into all kinds of issues like those above. I'm going to try the old way. This repo should have in BIG BOLD LETTERS that this is an alpha with issues and not production ready.

I'm not complaining, just stating a fact. I'm just frustrated at having lost so much time on a deadline. I do sincerely appreciate all of the hard work done here. 🥰 If I can help with the repo when I have more down time, I will do so. Thank you.

[witcradg]

Interesting. Once I'd converted image handling I've had no problems with Gatsby 5 at all.

…

On Thu, Mar 9, 2023 at 9:17 PM Stephen Parker ***@***.***> wrote: Yeah, this stinks. I wasted a bunch of time on this v5 implementation only to run into all kinds of issues like those above. I'm going to try the old way. This repo should have in *BIG BOLD LETTERS* that this is an alpha with issues and not production ready. I'm not complaining, just stating a fact. If I can help with the repo when I have more down time, I will do so. — Reply to this email directly, view it on GitHub <#179 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA4MU32MHNK5ZMXEN52OGOLW3K2NBANCNFSM6AAAAAASBAM2QU> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[zorandasc]

Also seeing these errors in react 18 and gatsby v5.

[ansmlc]

Gatsby 5?

[kailichiang]

I just bumped into the same problem and resolved it by --legacy-peer-deps as @Maclay74 mentioned. If you are using npm v7 and above, and have the same problem, this could be a workaround. You can check more information about peerDependencies. I'm using node v18.15.0 and npm v9.6.6.

Here are documents about npm dependencies:
dependencies
devDependencies
peerDependencies
bundledDependencies
optionalDependencies

@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 _

[ansmlc]

@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)...

What's wrong with using this "absolute position" solution in the first place? Just curious what you think.

I've been thinking about using this plugin, but even if it wasn't bugged, I'm not sure what's the point since GatsbyImage as absolutely-positioned element seems to work just fine.

[velser]

@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)...

What's wrong with using this "absolute position" solution in the first place? Just curious what you think.

I've been thinking about using this plugin, but even if it wasn't bugged, I'm not sure what's the point since GatsbyImage as absolutely-positioned element seems to work just fine.

Well, it works from my last post until now. It's just not as straightforward as using background for the purpose. I'm not sure that image is the proper logical concept to use for backgrounds. As all the positioning is basically a hack to make things work. And background is made specifically for that, it's even named like that :)

Also I'm not sure about accessibility on different devices for such approach.

For me it's all about cleanness of the code and less hack'ish solutions, from technical perspective it is fine as long as browsers support grid in my case. So I would go with GatsbyImage if you are considering, less annoying errors in console (and especially in logger if you have any)

[a-rbsn]

Shame this hasn't been solved — I ended up having to set --force as an NPM_FLAG in Netlify:

https://docs.netlify.com/configure-builds/manage-dependencies/#npm