Sliding/changing images doesn't work with latest React client/server components and NextJS

[cgonzalezsan]

Checklist before opening an issue
Lots of issues are opened that are unrelated to this package, please take a moment to ensure the issue is not on your end 🙏.

• [x] Did you try google?
• [x] Did you search for previous Issues in this repo?

Describe the bug
Clicking in thumbnails or nav buttons doesn't work. Upon first load, If I quickly click (<1 second) on a nav arrow or thumbnail, it will throw the below error

Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server.

Library versions:

react: 18.2.0 next: 13.5.6

This is the code of the component I'm using

'use client';

import ImageGallery from 'react-image-gallery';
import 'react-image-gallery/styles/css/image-gallery.css';


export const Gallery = async () => {
	const images = [
		{
			original: 'https://picsum.photos/id/1018/1000/600/',
			thumbnail: 'https://picsum.photos/id/1018/250/150/',
		},
		{
			original: 'https://picsum.photos/id/1015/1000/600/',
			thumbnail: 'https://picsum.photos/id/1015/250/150/',
		},
		{
			original: 'https://picsum.photos/id/1019/1000/600/',
			thumbnail: 'https://picsum.photos/id/1019/250/150/',
		},
	];

	return (
		<div>
			<ImageGallery
				items={images}
				showFullscreenButton={false}
			/>
		</div>
	);
};

Image Gallery Version
What version of react-image-gallery are you using? 1.3.0

To Reproduce
Steps to reproduce the behavior:

1. Add the above component to a blank page
2. Load the app
3. Click on a Thumbnail image or nav arrow
4. Nothing will happen

Expected behavior
When clicking on a thumbnail, it should slide to that image.

Client info (please complete the following information):\

• OS: MacOS
• Browser: chrome

Additional context
If I don't use use client , it will also throw the below error.

You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
Learn more: https://nextjs.org/docs/getting-started/react-essentials

[xiaolin]

Its working fine for me without use client and using the version below. Anyone else able to replicate?

react: 18.2.0
next: 13.5.6

[ygorduraes]

Same issue here, macOS/Brave/Safari.

I can't remove use client because I need to use useState, only available in Client Components.

No console errors, and I also tried debugging clicks using onThumbnailClick, but nothing goes to the console either.

My versions:

react: 18.2.0
next: 14.1.0
react-image-gallery: 1.3.0([email protected])

[VedantKB]

Same issue for me. I see the format fine after importing CSS file ( which also should be updated in README for correct import in JS module ). Not able to click anything

import ImageGallery from 'react-image-gallery';
import 'react-image-gallery/styles/css/image-gallery.css';

const images = [
  {
    original: 'https://picsum.photos/id/1018/1000/600/',
    thumbnail: 'https://picsum.photos/id/1018/250/150/',
  },
  {
    original: 'https://picsum.photos/id/1015/1000/600/',
    thumbnail: 'https://picsum.photos/id/1015/250/150/',
  },
  {
    original: 'https://picsum.photos/id/1019/1000/600/',
    thumbnail: 'https://picsum.photos/id/1019/250/150/',
  },
];
 return <ImageGallery items={images} />;

"react-image-gallery": "^1.3.0",
"next": "13.0.6",
"react": "18.2.0",
"react-dom": "18.2.0",

[gblue1223]

import "react-image-gallery/styles/css/image-gallery.css"

this solve the problem