Want to use particle.js as the background for my hero component in React. Getting Error

Question

Im trying to create a react hero component in my portfolio web app. I used vite to create my project and installed TailwindCSS and particlejs via npm for my ui. I'd like to use particlejs as the background of the hero component I created. So far here are my components:

import React from 'react';
import ParticleBackground from "./ParticleBackground.js";

function Hero() {
    return (

        <div className="bg-red-500 text-white min-h-screen flex items-center">
            <ParticleBackground />
            <div className="container mx-auto text-center">
                <h1 className="text-4xl font-bold mb-4">
                    Elevate Your Brand with Creativity
                </h1>
                <p className="text-lg">
                    Welcome to The Buyck Brand, your gateway to innovative web development, striking graphic design, and captivating sound production. We're dedicated to making your brand stand out and leave a lasting impression.
                </p>
                <p className="text-lg mt-4">
                    Our tailored services are designed to meet your unique needs, because we believe your brand is one-of-a-kind. From concept to launch, we'll work closely with you to turn your vision into reality. Whether you're seeking a stunning website, eye-catching design work, or unforgettable sound production, we've got you covered.
                </p>
                <p className="text-lg mt-4">
                    Explore our portfolio to witness the excellence we bring to every project. Don't hesitate to reach out if you have any questions or just want to discuss your ideas. Let's embark on a creative journey together and make something extraordinary!
                </p>
                <a href="#whoAmI" className="bg-white text-red-500 hover:bg-red-200 px-4 py-2 rounded-md mt-8 inline-block">
                    Learn More
                </a>
            </div>
        </div>

    );
}

export default Hero;

import React, { useEffect } from 'react';
import particlesJS from 'particles.js';

function ParticleBackground() {

    useEffect(() => {
        particlesJS('particles-js', {
            // Configure Particle.js options here
            particles: {
                number: {
                    value: 80,
                    density: {
                        enable: true,
                        value_area: 800,
                    },
                },
                color: {
                    value: '#FFFFFF',
                },
                shape: {
                    type: 'circle',
                },
                size: {
                    value: 3,
                    random: true,
                },
                move: {
                    enable: true,
                    speed: 2,
                },
            },
        });
    }, []);

    return <div id="particles-js" className="fixed top-0 left-0 w-full h-full z-0" />;
}

export default ParticleBackground;

import './App.css'
import Hero from './components/Hero';

function App() {

  return (
    <>
      <Hero />
    </>
  )
}

export default App

On the localhost page, nothing is coming up and I get the error in the console : enter image description here

What am I doing wrong? Please help if possible! Thanks!!

My code is here....

Answer 1

Is you babel config correctly？

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}