Element type is invalid

digitalkaoz commented 3 months ago

Hey,

im using https://github.com/xiaolin/react-image-gallery but it fails with this error:

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)

i created a repro here: https://stackblitz.com/edit/vitejs-vite-z1dmei and created a ticket over there too (im not sure what goes wrong on what end). https://github.com/xiaolin/react-image-gallery/issues/799.

Thanks for looking into it. im not quite sure where the problem is

Daydreamer-riri commented 3 months ago

Hi @digitalkaoz, after my attempts, I believe this may be due to the react-image-gallery build version not having good support for server-side rendering. After removing the prop-type related code and directly use its source code, that is incompatible with Vite from the source code, it seems to run normally, but the build version always fails to run properly.

I noticed this library is somewhat outdated, which might also be the reason for its poor support for server-side rendering. Perhaps you could try https://swiperjs.com/react.

digitalkaoz commented 3 months ago

@Daydreamer-riri wow that was fast. Yeah i know its quite old, but its about porting an "old" react app onto vite+ssg, so i probably have to stick with it for a while (also its exactly fulfilling the use-cases and is lightweight).

what exactly did you change to make it work? i could create a PR over there

Daydreamer-riri commented 3 months ago

‌‌‌‌‌‌‌@digitalkaoz I've created a StackBlitz, which is currently functioning properly. You may refer to it.

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

digitalkaoz commented 3 months ago

ah i see, its simply the deprecated PropTypes stuff whats causing the problems. Thanks!

digitalkaoz commented 3 months ago

mh, can we make vite-react-ssg ignore those propTypes? its still a valid react feature right?

Daydreamer-riri commented 3 months ago

‌‌This is an issue with Vite.

In my opinion, the inability to use react-image-gallery might be due to a problem with its build artifacts. Its output works fine in client-side rendering mode, but not during server-side rendering. It only works properly when using its source code directly, so I suspect that the build process of react-image-gallery might have compromised its own server-side rendering capabilities.

digitalkaoz commented 3 months ago

thanks, as the project is rather inactive from my POV, im gonna switch to another ssr capable library

Daydreamer-riri / vite-react-ssg

Element type is invalid #19