CODEWITHSUNDEEP
reactjsimage-galleryreact-domastrojsreact-dom-server
menepet
menepet

Reputation: 882

Build error using Astro framework & react-image-gallery

I am using "astro": "~2.3.0" with "@astrojs/react": "~2.1.1" (using "react": "~18.2.0", "react-dom": "~18.2.0") & "react-image-gallery": "~1.2.11" and when I try to build (with astro build) the astro app I get this error from the ImageGallery component:

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

and it seems like there is an error on some import 💭

The component responsible for the error is:

import React from "react";
import ImageGallery from "react-image-gallery";
import "react-image-gallery/styles/scss/image-gallery.scss";
import styles from "./styles.module.scss";

function ProjectPage({ project = {} }) {
  return (
    <div className={styles.project}>
      <ImageGallery
        items={project.images}
      />
    </div>
  );
}
export default ProjectPage;

and I am using it on another astro file with the client:load directive like:

<ProjectView project={selectedProject} client:load />

The issue comes on prod build and not when running on dev server. Does anybody have an idea why this happens ??

Upvotes: 0

Views: 695

Answers (1)

menepet
menepet

Reputation: 882

Seems like it was a prod build error and a workaround is:

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

Gitgub issue answer

Upvotes: 0

Related Questions