react tsparticles:Error in animation loop

Question

I've been trying to integrate a tsparticles/react-tsparticles background in my react webpage, and have been getting this error or similar in my console:

Error in animation loop TypeError: Cannot read properties of undefined (reading 'circleRange')

Below is my complete component code:

import React from 'react'
import './index.css'
import Intro from '../components/Intro'
import { useCallback } from "react";
import Particles from 'react-tsparticles'
import { loadFull } from 'tsparticles'
import Cursor from '../components/Cursor';

function Home() {
  //background
  const loadParticles = useCallback(async engine => {
    console.log(engine);
    // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
    // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
    // starting from v2 you can add only the features you need reducing the bundle size
    //await loadFull(engine);
    await loadFull(engine);
}, []);

const particlesLoaded = useCallback(async container => {
    await console.log(container);
}, []);

  return (
    <div>
      <Particles 
    id="tsparticles"
    init={loadParticles}
    loaded={particlesLoaded}

    options={{
      background: {
          color: {
              value: "#0d47a1",
          },
      },
      fpsLimit: 120,
      interactivity: {
          events: {
              onClick: {
                  enable: true,
                  mode: "push",
              },
              onHover: {
                  enable: true,
                  mode: "repulse",
              },
              resize: true,
          },
          modes: {
              push: {
                  quantity: 4,
              },
              repulse: {
                  distance: 200,
                  duration: 0.4,
              },
          },
      },
      particles: {
          color: {
              value: "#ffffff",
          },
          links: {
              color: "#ffffff",
              distance: 150,
              enable: true,
              opacity: 0.5,
              width: 1,
          },
          move: {
              direction: "none",
              enable: true,
              outModes: {
                  default: "bounce",
              },
              random: false,
              speed: 6,
              straight: false,
          },
          number: {
              density: {
                  enable: true,
                  area: 800,
              },
              value: 80,
          },
          opacity: {
              value: 0.5,
          },
          shape: {
              type: "circle",
          },
          size: {
              value: { min: 1, max: 5 },
          },
      },
      detectRetina: true,
  }}
    />
    <div className="intro-overlay">
         <Intro />
    </div>
         <Cursor />
    </div>
  )
}

export default Home

Any clue on how to fix this?

I've uninstalled and reinstalled tsparticles and react-tsparticles several times as well as tried several json configurations for the Particles component. The error disappears when I remove everything besides the background in options{{}}, and the background color always shows.

Answer 1

Mine worked only on 2.0.6 as well...

npm install react-tsparticles tsparticles@2.0.6

PS: make sure you use correctly import elements and init the enginge

Answer 2

I was having the same problem and the solution was to install the tsparticles version 2.0.6.

npm install react-tsparticles tsparticles@2.0.6

This command should fix your problem just like it fixed mine.