The plugin is causing hydration failure on React 18

[exil0867]

Description

It seems this plugin has compatibility issue with React 18. The hydration error only occurs in the production-ready build version of Gatsby, it does not occur in development.

Two errors it throws are: https://reactjs.org/docs/error-decoder.html/?invariant=418 https://reactjs.org/docs/error-decoder.html/?invariant=423

Steps to reproduce

1. Be on React 18
2. Use the gatsby-background-image plugin
3. Release a production build and serve it using yarn build && yarn serve
4. Open the page, check the console and observe the errors.

Live example:

https://codesandbox.io/s/relaxed-chatelet-4tr3p3 (I don't know why the built-in CodeSandbox console is not catching those errors, you can instead open the preview URL in a new tab and check the the browser console log).

Note: i couldn't get the Gatsby build to use a non-minified dev environment so the errors are not as helpful as they should be. I would appreciate it if someone could fork the live example and make it produce a non-minified build.

Possibly a relevant Stack Overflow issue: https://stackoverflow.com/questions/71706064/react-18-hydration-failed-because-the-initial-ui-does-not-match-what-was-render

[github-actions[bot]]

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 : )!

[tadeas22]

Same for me

[reflix299]

Same here. Would be great to have an update on this.

[ThanosDi]

Same here

[spencersmb]

Issue here with react 18 as well in my Production build.

[bryantabaird]

Got this issue as well. After some debugging, I found that I could get a better error when turning on SSR for gatsby develop in gatsby-config.js:

flags: {
  DEV_SSR: true,
}

I got this additional warning.

Prop `dangerouslySetInnerHTML` did not match. Server: "\n          .gbi-1210079953-nKns1GYbocYerxS71tN7qe:before,\n          .gbi-1210079953-nKns1GYbocYerxS71tN7qe:after {\n            content: '';\n            display: block;\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            top: 0;\n            left: 0;\n            \n            transition: opacity 0.5s ease 250ms;\n            background-position: center;\nbackground-repeat: no-repeat;\nbackground-size: cover;\n\n          }\n          .gbi-1210079953-nKns1GYbocYerxS71tN7qe:before {\n            z-index: -100;\n            \n            \n            opacity: 1; \n          }\n          .gbi-1210079953-nKns1GYbocYerxS71tN7qe:after {\n            z-index: -101;\n            \n            \n            \n          }\n        " Client: "\n          .gbi-1210079953-feJsFb6sJKJehYHdvcanjN:before,\n          .gbi-1210079953-feJsFb6sJKJehYHdvcanjN:after {\n            content: '';\n            display: block;\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            top: 0;\n            left: 0;\n            \n            transition: opacity 0.5s ease 250ms;\n            background-position: center;\nbackground-repeat: no-repeat;\nbackground-size: cover;\n\n          }\n          .gbi-1210079953-feJsFb6sJKJehYHdvcanjN:before {\n            z-index: -100;\n            background-image: url(data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAJABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAUCAwT/xAAWAQEBAQAAAAAAAAAAAAAAAAADAQL/2gAMAwEAAhADEAAAAZlTA0XGouf/xAAaEAACAgMAAAAAAAAAAAAAAAABAgASAyEy/9oACAEBAAEFAmawViq13j5WGf/EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAgBAwEBPwGsf//EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAgBAgEBPwGNf//EABoQAAICAwAAAAAAAAAAAAAAAAERABAiMWH/2gAIAQEABj8C04Auw4ujX//EABwQAAICAgMAAAAAAAAAAAAAAAABETFBcVFhsf/aAAgBAQABPyFTWm4dktaViTguPUvqYaP/2gAMAwEAAgADAAAAEGDf/8QAFhEBAQEAAAAAAAAAAAAAAAAAARAh/9oACAEDAQE/ECGR/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxAP/8QAHBAAAgICAwAAAAAAAAAAAAAAAREAITFxEFFh/9oACAEBAAE/EDoomiY7OGIyQRQPhjAICdpzFtwOeif/2Q==);\n            \n            opacity: 1; \n          }\n          .gbi-1210079953-feJsFb6sJKJehYHdvcanjN:after {\n            z-index: -101;\n            \n            \n            \n          }\n        

Basically, this prop from the server:

\n          .gbi-1210079953-nKns1GYbocYerxS71tN7qe:before,\n          .gbi-1210079953-nKns1GYbocYerxS71tN7qe:after {\n            content: '';\n            display: block;\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            top: 0;\n            left: 0;\n            \n            transition: opacity 0.5s ease 250ms;\n            background-position: center;\nbackground-repeat: no-repeat;\nbackground-size: cover;\n\n          }\n          .gbi-1210079953-nKns1GYbocYerxS71tN7qe:before {\n            z-index: -100;\n            \n            \n            opacity: 1; \n          }\n          .gbi-1210079953-nKns1GYbocYerxS71tN7qe:after {\n            z-index: -101;\n            \n            \n            \n          }\n        

did not match this prop from the client:

\n          .gbi-1210079953-feJsFb6sJKJehYHdvcanjN:before,\n          .gbi-1210079953-feJsFb6sJKJehYHdvcanjN:after {\n            content: '';\n            display: block;\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            top: 0;\n            left: 0;\n            \n            transition: opacity 0.5s ease 250ms;\n            background-position: center;\nbackground-repeat: no-repeat;\nbackground-size: cover;\n\n          }\n          .gbi-1210079953-feJsFb6sJKJehYHdvcanjN:before {\n            z-index: -100;\n            background-image: url(data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAJABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAUCAwT/xAAWAQEBAQAAAAAAAAAAAAAAAAADAQL/2gAMAwEAAhADEAAAAZlTA0XGouf/xAAaEAACAgMAAAAAAAAAAAAAAAABAgASAyEy/9oACAEBAAEFAmawViq13j5WGf/EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAgBAwEBPwGsf//EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAgBAgEBPwGNf//EABoQAAICAwAAAAAAAAAAAAAAAAERABAiMWH/2gAIAQEABj8C04Auw4ujX//EABwQAAICAgMAAAAAAAAAAAAAAAABETFBcVFhsf/aAAgBAQABPyFTWm4dktaViTguPUvqYaP/2gAMAwEAAgADAAAAEGDf/8QAFhEBAQEAAAAAAAAAAAAAAAAAARAh/9oACAEDAQE/ECGR/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxAP/8QAHBAAAgICAwAAAAAAAAAAAAAAAREAITFxEFFh/9oACAEBAAE/EDoomiY7OGIyQRQPhjAICdpzFtwOeif/2Q==);\n            \n            opacity: 1; \n          }\n          .gbi-1210079953-feJsFb6sJKJehYHdvcanjN:after {\n            z-index: -101;\n            \n            \n            \n          }\n        

As far as I can tell. Not sure if this would be helpful to future readers. Good luck.