Support React 19

[IsaacInsoll]

I've upgraded to React 19 and am now getting the following error in the console with the page not rendering at all

Uncaught TypeError: Cannot read properties of undefined (reading 'ReactCurrentOwner')
    at requireReactJsxRuntime_production_min (react-grid-gallery.js?v=75288887:48:210)
    at react-grid-gallery.js?v=75288887:64:30
    at react-grid-gallery.js?v=75288887:12:70
    at node_modules/react-grid-gallery/dist/react-grid-gallery.umd.js (react-grid-gallery.js?v=75288887:13:7)
    at __require (chunk-EQCVQC35.js?v=75288887:9:50)
    at react-grid-gallery.js?v=75288887:422:16

[IsaacInsoll]

I'm not sure if this helps but:

I uninstalled the react-grid-gallery dependency and manually copied the src folder into my project and everything worked fine, so I believe your source code is fine but something about how this is packaged for dist is causing the problem that breaks in react 19.

[ullaskunder1]

any other solution?

[nemanjam]

I get this in Astro:

[astro-island] Error hydrating /_astro/Gallery.BQvI7pDl.js TypeError: c.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED is undefined
    f Gallery.BQvI7pDl.js:formatted:82
    Wt Gallery.BQvI7pDl.js:formatted:119
    Wt Gallery.BQvI7pDl.js:formatted:29
    Wt Gallery.BQvI7pDl.js:formatted:31
    Wt Gallery.BQvI7pDl.js:formatted:750
    <anonymous> Gallery.BQvI7pDl.js:formatted:754
gallery:196:3459
    start http://localhost:3000/gallery/:196

[linhtv97]

Is there any solution for this?
Nextjs: 15
React-React dom: 19

[anthony-df-nguyen]

I'm not sure if this helps but:

I uninstalled the react-grid-gallery dependency and manually copied the src folder into my project and everything worked fine, so I believe your source code is fine but something about how this is packaged for dist is causing the problem that breaks in react 19.

This worked for me.

[BugKiller-tech]

Is this resolved or not?

[benhowell]

@BugKiller-tech Not. That's why the issue is still open.

[IsaacInsoll]

I uninstalled the react-grid-gallery dependency and manually copied the src folder into my project and everything worked fine, so I believe your source code is fine but something about how this is packaged for dist is causing the problem that breaks in react 19.

This works fine so until this issue is resolved that's the easiest way to handle it.

@benhowell thanks for this awesome component! Just wanted to say that I really appreciate it

[benhowell]

I uninstalled the react-grid-gallery dependency and manually copied the src folder into my project and everything worked fine, so I believe your source code is fine but something about how this is packaged for dist is causing the problem that breaks in react 19.

This works fine so until this issue is resolved that's the easiest way to handle it.

@benhowell thanks for this awesome component! Just wanted to say that I really appreciate it

Thanks for the kind words @IsaacInsoll . @itoldya also did a lot of work moving to typescript and releasing v 1.0 so props to him for a ton of work.

The library would be 9 or 10 years old now and I haven't worked on it in quite some time. I only used it myself for about a year.

[BugKiller-tech]

Hi, I copied and pasted the "src" folder in my project but I got this kind of warning.

Image.tsx:121 A props object containing a "key" prop is being spread into JSX:
  let props = {key: someKey, data-testid: ..., src: ..., alt: ..., title: ..., style: ...};
  <img {...props} />
React keys must be passed directly to JSX without using spread:
  let props = {data-testid: ..., src: ..., alt: ..., title: ..., style: ...};
  <img key={someKey} {...props} />

[RobProductions]

I went through dependency hell after updating React and this package was one of the last on my list to address and get things working again. I ended up porting in the src folder to my repo and swapping the import, and it worked immediately. I understand that if people have moved on to other packages and if there's no support, then we can't expect it to be updated forever. But it is frustrating that, for over a year, nothing has been done to fix it on the dev side. I relied on this for my site and now feel like I'm stuck fixing this up myself locally going through the various warnings and errors present in the code :/

Hi, I copied and pasted the "src" folder in my project but I got this kind of warning.

Image.tsx:121 A props object containing a "key" prop is being spread into JSX:
let props = {key: someKey, data-testid: ..., src: ..., alt: ..., title: ..., style: ...};
<img {...props} />
React keys must be passed directly to JSX without using spread:
let props = {data-testid: ..., src: ..., alt: ..., title: ..., style: ...};
<img key={someKey} {...props} />

The <img> element in Image.tsx cannot receive all of the props defined in the thumbnailProps object. I managed to clean this up by replacing the <img {...thumbnailProps}> with this:

<img src={thumbnailProps.src} alt={item.alt ? item.alt : ""} style={getStyle(thumbnailStyle, styles.thumbnail, styleContext)}
            title={typeof item.caption === "string" ? item.caption : undefined} />

There are a few other issues with not so good handling of undefined variables but I'm doing my best to improve them on my end.

[benhowell]

I went through dependency hell after updating React and this package was one of the last on my list to address and get things working again. I ended up porting in the src folder to my repo and swapping the import, and it worked immediately. I understand that if people have moved on to other packages and if there's no support, then we can't expect it to be updated forever. But it is frustrating that, for over a year, nothing has been done to fix it on the dev side. I relied on this for my site and now feel like I'm stuck fixing this up myself locally going through the various warnings and errors present in the code :/

Hi, I copied and pasted the "src" folder in my project but I got this kind of warning.
Image.tsx:121 A props object containing a "key" prop is being spread into JSX:
let props = {key: someKey, data-testid: ..., src: ..., alt: ..., title: ..., style: ...};
<img {...props} />
React keys must be passed directly to JSX without using spread:
let props = {data-testid: ..., src: ..., alt: ..., title: ..., style: ...};
<img key={someKey} {...props} />

The <img> element in Image.tsx cannot receive all of the props defined in the thumbnailProps object. I managed to clean this up by replacing the <img {...thumbnailProps}> with this:

<img src={thumbnailProps.src} alt={item.alt ? item.alt : ""} style={getStyle(thumbnailStyle, styles.thumbnail, styleContext)}
title={typeof item.caption === "string" ? item.caption : undefined} />

There are a few other issues with not so good handling of undefined variables but I'm doing my best to improve them on my end.

@RobProductions

I don't rely on this library, and haven't done so for more than a decade. I kept it going for most of that decade because, I don't know? Giving away free stuff? Wanted to keep free software that's useful out there? Wanted people to rely on it and complain that because they rely on it that I should maintain it forever?

What you're telling me is
"""
You relied on this for your site and now feel like you're stuck fixing this up yourself locally going through the various warnings and errors present in the code :/
"""
and?

Oh, while we're on the subject of fixing code for free or whatever your ideology dictates... ever thought of submitting a PR when "you have to resort to fixing the code yourself"? No, didn't think so.

[RobProductions]

Wanted people to rely on it and complain that because they rely on it that I should maintain it forever?

What you're telling me is """ You relied on this for your site and now feel like you're stuck fixing this up yourself locally going through the various warnings and errors present in the code :/ """ and?

Hey, no, I'm not trying to say that it should be maintained forever and didn't mean to imply that. I was mostly just venting my frustration, not berating the package devs for not keeping it up to date. If it's not supported any more than that's fine, I'm sorry if I sounded upset but it's been a rough time upgrading and it's unfortunate how much has to be done in the React world to keep things working. But that's not the package's fault at all.

Oh, while we're on the subject of fixing code for free or whatever your ideology dictates... ever thought of submitting a PR when "you have to resort to fixing the code yourself"? No, didn't think so.

Alright, there's no need to act like that or draw conclusions about my ideology. I'm allowed to be frustrated at the situation without demanding anything or blaming the package devs. In fact, I think you and the other contributors have done an excellent job. Just because there were errors in the code when I imported it, that doesn't mean anything about the quality of the project as it still works and the development landscape changes over time quite a bit to where some errors were not errors on older environments, I get that, and it wasn't meant as a dig or anything. But when I'm working with the code directly I wanted to take the extra steps to make my compiler happy, and that's why I was "fixing it up" locally.

If you're accepting pull requests, you can just ask and I could try to contribute when time allows. I wasn't sure if anything would actually be merged here after reading your post when you said "The library would be 9 or 10 years old now and I haven't worked on it in quite some time." I posted here in the first place because I wanted to help someone with the "key" prop issue, and wouldn't mind submitting code to fix it permanently for example.

I don't rely on this library, and haven't done so for more than a decade. I kept it going for most of that decade because, I don't know? Giving away free stuff? Wanted to keep free software that's useful out there?

I mean, I'm not sure how I was supposed to know that when I added the dependency. The last version was updated on npm a year ago and as far as I can tell there's no note there or in the readme with anything saying that it's not updated any more or doesn't support React 19. It's not anyone's fault, but since I didn't know the history of the project or state of development, I installed it and used it when I was building my site. I will again stress that I'm not trying to complain, point fingers, or demand updates, I was just trying to add my voice here in case it helps show that people are still using this. If this is the end of the road for the package, then I completely understand and I apologize if my last comment was too harsh or had a bad tone, that wasn't really my intention.