Package doesn't seem to function when I run `next export`

Question

I've got a project where I'm using 'react-multi-carousel' to display a carousel. Since I am on react 18 and it kept asking for react 16, i had to use --legacy-peer-deps to install. When I run via next dev or next start it seems to show the carousel like it should, but when I run via next export, the carousels are not rendered.

It had omitted rendering carousels only when I exported.

This is my package.json:

{
  "name": "weewoo",
  "version": "1.5.4",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "export": "next export"
  },
  "dependencies": {
    "@emotion/core": "^11.0.0",
    "@emotion/react": "^11.11.1",
    "analytics": "^0.8.9",
    "dotenv": "^16.3.1",
    "emotion": "^11.0.0",
    "eslint": "8.48.0",
    "eslint-config-next": "13.4.19",
    "framer-motion": "^10.16.1",
    "fs": "^0.0.1-security",
    "globby": "^13.2.2",
    "isomorphic-unfetch": "^4.0.2",
    "next": "13.4.19",
    "next-compose-plugins": "^2.2.1",
    "next-images": "^1.8.5",
    "next-optimized-images": "^1.4.2",
    "next-sitemap": "^4.2.2",
    "prettier": "^3.0.3",
    "rc-drawer": "^6.4.1",
    "react": "18.2.0",
    "react-custom-scrollbars": "^4.2.1",
    "react-dom": "18.2.0",
    "react-ga": "^3.3.1",
    "react-icons": "^4.10.1",
    "react-modal-video": "^2.0.1",
    "react-multi-carousel": "^2.8.4",
    "react-player": "^2.12.0",
    "react-scroll": "^1.8.9",
    "react-stickynode": "^4.1.0",
    "react-youtube": "^10.1.0",
    "theme": "^0.0.8",
    "theme-ui": "^0.16.1",
    "typeface-dm-sans": "^1.1.13"
  }
}

This is my carousel:

<Box sx={styles.carouselWrapper}>
          <Carousel
            additionalTransfrom={0}
            arrows={false}
            autoPlaySpeed={3000}
            centerMode={false}
            className=""
            containerClass="carousel-container"
            customButtonGroup={<ButtonGroup />}
            dotListClass="test"
            draggable={true}
            focusOnSelect={false}
            infinite={true}
            itemClass=""
            keyBoardControl
            minimumTouchDrag={80}
            renderButtonGroupOutside
            renderDotsOutside={false}
            responsive={responsive}
            showDots={false}
            sliderClass=""
            slidesToSlide={1}
          >
            {data.map((item) => (
              <PostCard
                key={item.id}
                src={item.imgSrc}
                alt={item.altText}
                postLink={item.postLink}
                title={item.title}
                authorName={item.authorName}
                date={item.date}
              />
            ))}
          </Carousel>
        </Box>

Package doesn't seem to function when I run `next export`

0 Answers0