dromru / react-photoswipe-gallery

🏙 React component wrapper around PhotoSwipe
https://dromru.github.io/react-photoswipe-gallery/
MIT License
520 stars 28 forks source link

NextJS error #1353

Open fabritw opened 10 months ago

fabritw commented 10 months ago

Describe the bug Error occurring using App router (NextJS v14)

Failed to generate static paths for /projects/[slug]:
TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
    at eval (webpack-internal:///(rsc)/./node_modules/react-photoswipe-gallery/dist/context.js:7:83)

Code example // FILE: src/components/Gallery/index.tsx export { Gallery, Item } from "react-photoswipe-gallery";

// FILE: src/app/posts/[slug/]page.tsx

import { Gallery, Item } from "@/components/Gallery";
...
<Gallery withCaption>
  {post.gallery &&
    post.gallery.map((item, index) => (
      <Item
        key={index}
        original={item.image}
        thumbnail={item.image}
        width={item.width}
        height={item.height}
        caption={item.caption}
      >
        {({ ref, open }) => (
          <Image
            ref={ref}
            onClick={open}
            src={item.image}
            width={100}
            alt={item.caption}
          />
        )}
      </Item>
    ))}
</Gallery>

Attempted Fix Setting "use client", causes a different error

 Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
  <... original=... thumbnail=... width=... height=... caption=... children={function}>

// FILE: src/components/Gallery/index.tsx

"use client";
export { Gallery, Item } from "react-photoswipe-gallery";

// FILE: src/app/posts/[slug/]page.tsx ... same as above


Any suggestions what could be a solution please?

akhmadullin commented 10 months ago

Hi, can you provide a repo or a sandbox, where this case can be reproduced?