Closed nzuzomalinga closed 6 months ago
I don't think it's related to Vike. That said, provide a minimal reproduction and I'll have a look at it.
Hi @brillout, thanks for your speedy feedback on this issue.
You can reproduce this error locally by cloning the following repository and here is the component mentioned in my previous comment.
Feel free to send through a PR using the development branch if you manage to isolate the issue at hand here.
I appreciate your hard work and loving using this framework so far, would be great to understand why this is happening though and how to fix it.
Thanks again.
@nzuzomalinga Please create a reproduction that is minimal starting off a minimal Bati or npm init vike@latest
app.
@brillout I've done so on this branch
@nzuzomalinga Have you checked https://vike.dev/broken-npm-package#react-invalid-component? Is there something on that page that wasn't clear?
Hi @brillout , I've tried using the patches from the link you provided, however this did not reveal any new actionable steps to me. I just ended up getting more jsx component warnings and errors related to the component within the react-image-gallery library.
Even after using the solution provided by the link you shared, I still get compilation errors and my react project does not render to the dom as it should. Here is an example of the fix I tried as per the link you provided, found on this branch of the minimal reproduction.
import react from '@vitejs/plugin-react'
import vike from 'vike/plugin'
import { UserConfig } from 'vite'
const config: UserConfig = {
plugins: [react(), vike()],
ssr: {
// Add npm packages containing invalid code here
noExternal: ['react-image-gallery']
}
}
export default config
I see, I'll continue digging into this later today.
You can make it work with the following:
import ImageGallery_ from "react-image-gallery";
const ImageGallery = (ImageGallery_ as any).default as typeof ImageGallery_
It's unfortunately a common CJS/ESM issue. (And there isn't much Vike can do about.)
You can also make it work by using https://github.com/cyco130/vite-plugin-cjs-interop.
// vite.config.js
import { cjsInterop } from "vite-plugin-cjs-interop";
export default {
plugins: [
cjsInterop({
// List of CJS dependencies that require interop
dependencies: [
"react-image-gallery",
],
}),
],
};
I tried and it works.
I'll update the docs to mention vite-plugin-cjs-interop
and to further clarify what the solution is.
Done, I believe https://vike.dev/broken-npm-package#react-invalid-component is now clearer and more helpful.
Thanks @brillout, my project seems to be working fine now👍🏽🙌🏽 I appreciate the updated documentation as well, it looks great 🥳
Problem
I am having issues rendering a simple example from the image gallery npm package called "react-image-gallery". This package is widely used and trusted and the documentation seems water tight on their end so I am not sure why I can not render anything from their npm package
Source Code
Console Readout
Browser
Config.h.ts file
Additional information
The console readout suggests that I have used an incorrect export syntax for my component but this can not be the case as I have simply commented out the ImageGallery component and replaced it with a div and that exports and renders just fine. Your help would be appreciated here. thanks.