I was trying to use Aceternity UI’s meteor effect, but it did not work when I tried it in NextJs 14.2.3.

Expected Result

What I got

For anyone wondering, I am also using shadcn. This is the error message that I get:

and here is my meteors.tsx

import { cn } from "@/lib/utils";
import clsx from "clsx";
import React from "react";

export const Meteors = ({
  number,
  className,
}: {
  number?: number;
  className?: string;
}) => {
  const meteors = new Array(number || 20).fill(true);
  return (
    <>
      {meteors.map((el, idx) => (
        <span
          key={"meteor" + idx}
          className={cn(
            "animate-meteor-effect absolute top-1/2 left-1/2 h-0.5 w-0.5 rounded-[9999px] bg-slate-500 shadow-[0_0_0_1px_#ffffff10] rotate-[215deg]",
            "before:content-[''] before:absolute before:top-1/2 before:transform before:-translate-y-[50%] before:w-[50px] before:h-[1px] before:bg-gradient-to-r before:from-[#64748b] before:to-transparent",
            className
          )}
          style={{
            top: 0,
            left: Math.floor(Math.random() * (400 - -400) + -400) + "px",
            animationDelay: Math.random() * (0.8 - 0.2) + 0.2 + "s",
            animationDuration: Math.floor(Math.random() * (10 - 2) + 2) + "s",
          }}
        ></span>
      ))}
    </>
  );
};

and the meteor card

"use client";

import React from "react";
import { Highlight } from "./ui/hero-highlight";
import { Meteors } from "./ui/meteor";

const Hero = () => {
  return (
    <div className="h-screen w-full pt-0 flex items-start">
      <div>
        <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
          The Joke Tax Chronicles{" "}
        </h1>
        <div className="">
          <div className=" w-full relative max-w-xs">
            <div className="absolute inset-0 h-full w-full bg-gradient-to-r from-blue-500 to-teal-500 transform scale-[0.80] bg-red-500 rounded-full blur-3xl" />
            <div className="relative shadow-xl bg-gray-900 border border-gray-800  px-4 py-8 h-full overflow-hidden rounded-2xl flex flex-col justify-end items-start">
              <div className="h-5 w-5 rounded-full border flex items-center justify-center mb-4 border-gray-500">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  strokeWidth="1.5"
                  stroke="currentColor"
                  className="h-2 w-2 text-gray-300"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    d="M4.5 4.5l15 15m0 0V8.25m0 11.25H8.25"
                  />
                </svg>
              </div>

              <h1 className="font-bold text-xl text-white mb-4 relative z-50">
                Meteors because they're cool
              </h1>

              <p className="font-normal text-base text-slate-500 mb-4 relative z-50">
                I don't know what to write so I'll just paste
                something cool here. One more sentence because lorem ipsum is
                just unacceptable. Won't ChatGPT the shit out of this.
              </p>

              <button className="border px-4 py-1 rounded-lg  border-gray-500 text-gray-300">
                Explore
              </button>

              {/* Meaty part - Meteor effect */}
              <Meteors number={20} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Hero;

I tried to change all the Math.Random() calculations to useState, but It still did not work, although the error message did disappear.

const [randNum, setRandNum] = useState<string[]>([]);
const [leftNum, setLeftNum] = useState<string[]>([]);
const [duration, setDuration] = useState<string[]>([]);
useEffect(() => {
let temp: string[] = [];
let leftTemp: string[] = [];
let tempDuration: string[] = [];
for (let index = 0; index < (number ? number : 20); index++) {
temp.push(Math.random() * (0.8 - 0.2) + 0.2 + "s");
leftTemp.push(Math.floor(Math.random() * (400 - -400) + -400) + "px");
tempDuration.push(Math.floor(Math.random() * (10 - 2) + 2) + "s");
}

setRandNum(temp);
setLeftNum(leftTemp);
setDuration(tempDuration);
}, []);