1

I am working on a project with Next.js 13 and LightGallery, to achieve a lightbox within a dynamic page. I am experiencing this error when I install the package and paste the code into my component. The project is running Next.js 13 with the new App Directory, and first I thought that might be the reason, but I see that other people seem to have been able to make it work.

My package.json looks as follows:

{
"private": true,
"homepage": "http://localhost:3000",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"@heroicons/react": "^2.0.13",
"@next/font": "^13.1.6",
"@nextui-org/react": "^1.0.0-beta.12",
"@supabase/auth-helpers-nextjs": "^0.5.2",
"@supabase/auth-helpers-react": "^0.3.1",
"@supabase/supabase-js": "^2.2.2",
"@types/gtag.js": "^0.0.12",
"axios": "^1.2.2",
"convertkit-react": "^1.5.5",
"cors": "^2.8.5",
"encoding": "^0.1.13",
"express": "^4.18.2",
"lightgallery": "^2.7.1",
"next": "^13.0.1",
"next-share": "^0.19.0",
"nextjs-cors": "^2.1.2",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hotjar": "^5.4.1",
"request": "^2.88.2",
"server-only": "^0.0.1"
},
"devDependencies": {
"@types/cors": "^2.8.13",
"@types/node": "18.11.3",
"@types/react": "18.0.21",
"@types/react-dom": "18.0.6",
"autoprefixer": "^10.4.12",
"eslint": "^8.33.0",
"eslint-config-next": "^13.1.6",
"postcss": "^8.4.18",
"tailwindcss": "^3.2.4",
"typescript": "4.9.4"
}

The error message looks as follows: image

The Lightbox is in a dynamic page, which looks like this:

 import React from "react";
 import Image from "next/image";
 import LightGallery from 'lightgallery/react';
 
 // import styles
 import 'lightgallery/css/lightgallery.css';
 import 'lightgallery/css/lg-zoom.css';
 import 'lightgallery/css/lg-thumbnail.css';
 import lgThumbnail from 'lightgallery/plugins/thumbnail';
 import lgZoom from 'lightgallery/plugins/zoom';
 
 ...
 export default async function HostPage({
 ...
   return (
     <div>
         <LightGallery
                 onInit={() => console.log("initialized")}
                 speed={500}
                 plugins={[lgThumbnail, lgZoom]}
             >
                     <Image alt="img1" src="public/ac_logo.png" />           
                     <Image alt="img2" src="public/ac_logo.png" />
               
             </LightGallery>
     </div>
   );
 }

There is more code on this page, I omitted it for simplicity, but I can give more context if needed. Is this a known error, or am I doing something fundamentally wrong? Can someone point me in the right direction?

Thank you!

nelakay
  • 103
  • 1
  • 11
  • It seems the `LightGallery` component is using refs under the hood (hence the `useRef` hook mention on the error) which is not possible on server components. Does the problem persist if you include the `'use client'` directive on the top of the page component? – ivanatias Mar 04 '23 at 00:21
  • @ivanatias Thank you for your reply! I added "use client" at the top of the page, and the error message changed to `Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.` In the CallStack of the error I can see that it seems to be related to react-dom. – nelakay Mar 05 '23 at 12:24

0 Answers0