How to properly import @brainhubeu/react-carousel in nextjs

Question

I have been trying to use @brainhubeu/react-carousel in nextjs without success. I have used next/dynamic with ssr=false because of SSR. Here's my code:

import React from "react";
import small from "../../../images/app-small-book.jpg";
import Image from "next/image";
import dynamic from "next/dynamic";
import "@brainhubeu/react-carousel/lib/style.css";

const { default: Carousel, Dots } = dynamic(
  () => require("@brainhubeu/react-carousel") ,
  { ssr: false }
);

export default function MyCarousel() {
  return (
    <Carousel plugins={["arrows"]}>
      <img src={small} />
      <img src={small} />
      <img src={small} />
    </Carousel>
  );

  function Stuff() {
    return (
      <div className="flex py-1">
        <div>
          <Image alt="twitter" src={small} />
        </div>
        <div className="pl-2">
          <p className="sm:text-sm lg:text-base text-xxs font-bold ">
            Our Book One
          </p>
          <p className="sm:text-xs lg:text-sm text-xxs  ">Our Author One</p>
          <p className="sm:text-xs text-xxs font-bold">Ksh. 30</p>
        </div>
      </div>
    );
  }
}

I use tailwind in my project and after searching around I modified postcss.config.js Not sure if this helps, but didn't make a difference.

const purgecss = [
  "@fullhuman/postcss-purgecss",
  {`enter code here`
    content: [
      "./node_modules/@brainhubeu/react-carousel/lib/style.css",
      "./node_modules/@brainhubeu/react-carousel/lib/style.css.map",
      "./node_modules/react-toastify/dist/*.css",
      "./components/**/*.js",
      "./pages/**/*.js",
    ],
    defaultExtractor: (content) => {
      const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [];
      const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || [];
      return broadMatches.concat(innerMatches);
    },
  },
];

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

This is the error I get in VScode:

error - Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Any help will be appreciated. Including alternative carousels for nextjs.

Answer 1

I couldn't get it to work, ended up using react-alice-carousel package instead. Works really well.