Deployment error on Vercel about bear-react-carousel HOT 3 CLOSED

@thefubon

Hi, I just created a new Next.js project for testing purposes and successfully deployed it on Vercel.

In the customized Carousel Component, I used 'use client'.

'use client'

import BearCarousel, {BearSlideCard} from 'bear-react-carousel';
import "bear-react-carousel/dist/index.css";

export default function Carousel() {
    // ..... other ignore
    return <BearCarousel data={bearSlideItemData} height="400px" />;
}

Then, I dynamically imported it in the place where it is being used.

import dynamic from 'next/dynamic';

const Carousel = dynamic(() => import('../components/Carousel'), {
  ssr: false,
});

export default function Home() {
    return <div>
        <Carousel/>
    </div>;
}

You can try this example to see if it solves your problem. If you still encounter issues, please provide a git repository that can reproduce the problem.

https://nextjs-bear-carousel-example.vercel.app/

I hope this can help you.

from bear-react-carousel.

import dynamic from "next/dynamic";
const BearCarousel = dynamic(
() => import("bear-react-carousel").then((mod) => mod), {ssr: false}
);

The problem is that if the files are inside a component, it gives an error on Vercel.

'use client'

import dynamic from "next/dynamic";
import { BearSlideCard } from "bear-react-carousel";

import "bear-react-carousel/dist/index.css";

const BearCarousel = dynamic(
  () => import("bear-react-carousel").then((mod) => mod), {ssr: false}
);

const Carousel = () => {
  const images = [
    { id: 1, imageUrl: "https://dummyimage.com/900x400/dee2e6/6c757d.jpg" },
    { id: 2, imageUrl: "https://dummyimage.com/900x400/dee2e6/6c757d.jpg" },
    { id: 3, imageUrl: "https://dummyimage.com/900x400/dee2e6/6c757d.jpg" }
  ];

  const bearSlideItemData = images.map((row) => {
    return {
      key: row.id,
      children: <BearSlideCard bgUrl={row.imageUrl} />
    };
  });

  return <BearCarousel data={bearSlideItemData} height="400px" />;
}

export default Carousel;

from bear-react-carousel.

@thefubon I found the issue you mentioned. After performing the build and deploying it to Vercel, no errors occurred. You can try version 4.0.9 again.

example: https://github.com/imagine10255/nextjs-bear-carousel-example/blob/main/src/components/Carousel2.tsx

from bear-react-carousel.