CSS breaking using Vite (react) + SWC

[rick427]

I don't know what seems to be the issue but the library is breaking (i.e the css of the package is not working) when using it with a new vite project. I literally copied the exmaple listed in the documentation and it's still breaking. Any help is appreciated.

These are my dependencies

"dependencies": {
    "@radix-ui/themes": "^2.0.3",
    "hamburger-react": "^2.5.0",
    "hero-slider": "^3.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.22.3",
    "sass": "^1.69.5"
  }

"devDependencies": {
    "@types/react": "^18.2.64",
    "@types/react-dom": "^18.2.21",
    "@typescript-eslint/eslint-plugin": "^7.1.1",
    "@typescript-eslint/parser": "^7.1.1",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "typescript": "^5.2.2",
    "vite": "^5.1.6"
  }

Hero slider component

import HeroSlider, {Overlay, Slide, MenuNav} from "hero-slider";
import { Heading, Text } from "@radix-ui/themes";

//@: Styles
import styles from "./hero.module.scss";

//@: Assets
import hero_01 from "@/assets/images/hero/hero-1.jpg";
import hero_02 from "@/assets/images/hero/hero-2.jpg";
import hero_03 from "@/assets/images/hero/hero-3.jpg";
import hero_04 from "@/assets/images/hero/hero-4.jpg";

const listings = [
    {
        _id: 1,
        imageUrl: hero_01,
        location: "2nd Muthiaga - Nairobi",
        name: "Studio Apartment",
        description: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore repellat quas dolor voluptatem magni inventore, in dicta. Cumque vero nobis dolorum dicta quo delectus accusantium, ullam, adipisci ipsam repellendus molestias."
    },
    {
        _id: 2,
        imageUrl: hero_02,
        location: "Kilimani Road - Nairobi",
        name: "Lavington Apartments",
        description: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore repellat quas dolor voluptatem magni inventore, in dicta. Cumque vero nobis dolorum dicta quo delectus accusantium, ullam, adipisci ipsam repellendus molestias."
    },
    {
        _id: 3,
        imageUrl: hero_03,
        location: "Mogotio, Westlands - Nairobi",
        name: "Lavington Apartments",
        description: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore repellat quas dolor voluptatem magni inventore, in dicta. Cumque vero nobis dolorum dicta quo delectus accusantium, ullam, adipisci ipsam repellendus molestias."
    },
    {
        _id: 4,
        imageUrl: hero_04,
        location: "Kiambu Road - Nairobi",
        name: "Lavington Apartments",
        description: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore repellat quas dolor voluptatem magni inventore, in dicta. Cumque vero nobis dolorum dicta quo delectus accusantium, ullam, adipisci ipsam repellendus molestias."
    },
]

export default function Hero() {
    return (
        <HeroSlider
            autoplay
            controller={{
                initialSlide: 0,
                slidingDuration: 500,
                slidingDelay: 100,
                onSliding: (nextSlide) =>
                    console.log("onSliding(nextSlide): ", nextSlide),
                onBeforeSliding: (previousSlide, nextSlide) =>
                    console.log(
                        "onBeforeSliding(previousSlide, nextSlide): ",
                        previousSlide,
                        nextSlide
                    ),
                onAfterSliding: (nextSlide) =>
                    console.log("onAfterSliding(nextSlide): ", nextSlide)
            }}  
        >
            <Overlay>
                <div className={styles.hero}>
                    <div className={styles.hero__stack}>
                        <Heading as="h1" size="9">
                            Lavington Apartments
                        </Heading>
                        <Text as="p">
                            Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
                            Dolore repellat quas dolor voluptatem magni inventore, in dicta. 
                            Cumque vero nobis dolorum dicta quo delectus accusantium, ullam, 
                            adipisci ipsam repellendus molestias.
                        </Text>

                    </div>
                </div>
            </Overlay>

            {listings.map(el => (
                <Slide
                    key={el._id}
                    shouldRenderMask
                    label={el.location}
                    background={{
                        backgroundImageSrc: el.imageUrl,
                    }}
                />
            ))}

            <MenuNav />
        </HeroSlider>
    )
}