Create ESM bundle for ESM related projects (Astro, Svelte, Vite, and newer version of Next.js)

[xiaolin]

Describe the bug
The current webpack bundle only builds UMD which is causing issues with projects in ESM environment.

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

To Reproduce
Steps to reproduce the behavior:

1. Create a project using Astro
2. Import this library
3. It breaks

Expected behavior
It should work with ESM projects

[xiaolin]

Current workaround for ESM projects is to do the below.

import Gallery from 'react-image-gallery';
const ImageGallery = Gallery.default ? Gallery.default : Gallery;

[YakovL]

Is this the reason why in Vite I'm getting something like this? (It was supposed to show just one image, i.e. the gallery; instead, the page gets huge overflow by those extra images)

I'm using Vite and TypeScript, and using

import Gallery from 'react-image-gallery'
const ImageGallery = (Gallery as any).default ? (Gallery as any).default : Gallery

instead of

import ImageGallery from 'react-image-gallery'

didn't help.

[fullyDeepak]

Is this the reason why in Vite I'm getting something like this? (It was supposed to show just one image, i.e. the gallery; instead, the page gets huge overflow by those extra images)

I'm using Vite and TypeScript, and using

import Gallery from 'react-image-gallery'
const ImageGallery = (Gallery as any).default ? (Gallery as any).default : Gallery

instead of

import ImageGallery from 'react-image-gallery'

didn't help.

Importing CSS should fix it:

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

[YakovL]

@fullyDeepak thanks, that worked indeed, somehow I've overlooked that bit (and worked without the const ImageGallery = (Gallery as any).default ? (Gallery as any).default : Gallery trick)