search

xiaolin / react-image-gallery

React carousel image gallery component with thumbnail support 🖼
http://linxtion.com/demo/react-image-gallery
MIT License
3.79k stars 709 forks source link

Rendering error with Vite-SSG #799

Closed digitalkaoz closed 1 month ago

digitalkaoz commented 4 months ago

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 🙏.

Describe the bug The Component has a problem when rendered on a server (through https://github.com/Daydreamer-riri/vite-react-ssg), while their ClientOnly approach works, it leads to an hydration error. In https://github.com/xiaolin/react-image-gallery/issues/576 it was state that it should work, somehow it doesnt. I couldnt narrow it down to a specific sub-component.

Image Gallery Version 1.3.0

To Reproduce

https://stackblitz.com/edit/vitejs-vite-z1dmei

Expected behavior The app renders fine

Screenshots

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at renderElement (/home/projects/vitejs-vite-z1dmei/node_modules/react-dom/cjs/react-dom-server.node.development.js:6120:9)
    at renderNodeDestructiveImpl (/home/projects/vitejs-vite-z1dmei/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/home/projects/vitejs-vite-z1dmei/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderElement (/home/projects/vitejs-vite-z1dmei/node_modules/react-dom/cjs/react-dom-server.node.development.js:6048:9)
    at renderNodeDestructiveImpl (/home/projects/vitejs-vite-z1dmei/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/home/projects/vitejs-vite-z1dmei/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderIndeterminateComponent (/home/projects/vitejs-vite-z1dmei/node_modules/react-dom/cjs/react-dom-server.node.development.js:5852:7)
    at renderElement (/home/projects/vitejs-vite-z1dmei/node_modules/react-dom/cjs/react-dom-server.node.development.js:6023:7)
    at renderNodeDestructiveImpl (/home/projects/vitejs-vite-z1dmei/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/home/projects/vitejs-vite-z1dmei/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)

Additional context its working fine when running purely through vite

xiaolin commented 1 month ago

Looks like Vite uses ESG, but this library is bundled using UMD.

If you do something like below, it should work.

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

const ImageGallery = Gallery.default ? Gallery.default : Gallery;