React-image-gallery npm package does not render

[nzuzomalinga]

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

import ImageGallery from "react-image-gallery";
import "react-image-gallery/styles/css/image-gallery.css";

export function Collaboration () {

  const images = [
    {
      original: "https://picsum.photos/id/1018/1000/600/",
      thumbnail: "https://picsum.photos/id/1018/250/150/",
    },
    {
      original: "https://picsum.photos/id/1015/1000/600/",
      thumbnail: "https://picsum.photos/id/1015/250/150/",
    },
    {
      original: "https://picsum.photos/id/1019/1000/600/",
      thumbnail: "https://picsum.photos/id/1019/250/150/",
    },
  ];

  return (
    <div className="collaboration">
       <ImageGallery items={images} />;
    </div>
  )
}

Console Readout

[vike][request(2)] Following error was thrown by the onRenderHtml() hook defined at /renderer/+onRenderHtml.tsx
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
 To fix this error, see https://vike.dev/broken-npm-package#react-invalid-component

Browser

Cannot GET /

Config.h.ts file

import type { Config } from 'vike/types'

// https://vike.dev/config
export default {
  // https://vike.dev/clientRouting
  clientRouting: true,
  // https://vike.dev/meta
  meta: {
    // Define new setting 'title'
    title: {
      env: { server: true, client: true }
    },
    // Define new setting 'description'
    description: {
      env: { server: true }
    }
  },
  hydrationCanBeAborted: true
} satisfies Config

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.

[brillout]

I don't think it's related to Vike. That said, provide a minimal reproduction and I'll have a look at it.

[nzuzomalinga]

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.

[brillout]

@nzuzomalinga Please create a reproduction that is minimal starting off a minimal Bati or npm init vike@latest app.

[nzuzomalinga]

@brillout I've done so on this branch

[brillout]

@nzuzomalinga Have you checked https://vike.dev/broken-npm-package#react-invalid-component? Is there something on that page that wasn't clear?

[nzuzomalinga]

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.

Vite.config.ts

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

[brillout]

I see, I'll continue digging into this later today.

[brillout]

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.

[brillout]

Done, I believe https://vike.dev/broken-npm-package#react-invalid-component is now clearer and more helpful.

[nzuzomalinga]

Thanks @brillout, my project seems to be working fine now👍🏽🙌🏽 I appreciate the updated documentation as well, it looks great 🥳