Error when importing to a custom block in WordPress block editor

[matthewmcvickar]

Describe the bug

When importing this project to use in a custom block in the WordPress block editor, the component does not work and instead shows a bunch of errors:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

I have a workaround for this (see below).

Image Gallery Version

1.3.0

To Reproduce

1. Run WordPress locally.
2. Use the @wordpress/create-block package to scaffold a custom block.
3. In your custom block, add this react-image-gallery component as a dependency.
4. Import the package as directed: import ImageGallery from 'react-image-gallery';
5. Include the example code from the repo homepage in the JSX for editing your custom block.
6. In the block editor, notice the custom block will not render and that there are errors in the browser console.

Expected behavior

The react-image-gallery component should import and render without error.

Client info (please complete the following information):

• OS: macOS
• Browser: latest versions of Firefox, Chrome, and Safari

Additional context

I am running Node v20 and NPM v10, and set "type": "module" in package.json so the project is fully ESM.

By searching around, I found a workaround that works in #727. I changed my code:

// doesn't work:
import ImageGallery from 'react-image-gallery';

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

I don't understand why this workaround works, and it seems like it shouldn't be necessary.