Astro框架结合react-image-gallery生产构建报错咨询

环境版本 #

• Astro: ~2.3.0
• @astrojs/react: ~2.1.1
• React & ReactDOM: ~18.2.0
• react-image-gallery: ~1.2.11

报错信息 #

执行astro build时触发错误：

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

注意：仅生产构建阶段出现该问题，开发服务器运行完全正常。

相关代码 #

React组件代码（ProjectPage.jsx） #

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;

Astro文件中引入组件 #

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

解决方案 #

这个问题是因为生产构建时，react-image-gallery的默认导出被打包工具处理成了对象，而非组件本身。可以用以下几种方式解决：

1. 修改导入路径
   直接导入组件的dist或ES模块版本：

// 替换原导入语句
import ImageGallery from "react-image-gallery/dist/image-gallery";
// 或者
import ImageGallery from "react-image-gallery/es";

2. 添加Vite优化配置
   在astro.config.mjs中配置Vite，确保正确处理该包的导出：

export default defineConfig({
  vite: {
    optimizeDeps: {
      include: ["react-image-gallery"],
    },
  },
});

原因说明 #

开发环境下Vite的热更新机制对模块导出处理较宽松，但生产构建时会做严格的树摇和模块优化，react-image-gallery的默认导出被包裹成了类似{ default: ImageGallery }的对象，导致React无法识别为有效组件类型。通过指定具体的组件文件路径或添加优化配置，可以绕过这个导出处理问题。

内容的提问来源于stack exchange，提问作者menepet