TsParticle library Not render Properly with Nextjs

Question

I tried to implement tsParticles in Next.js, but it gave me a runtime error:

TypeError: interactor.init is not a function

Below is My Code

"use client"
import React from "react";
import Particles from "react-tsparticles"; 
import { loadFull } from 'tsparticles';
import { useCallback } from 'react';

const ParticleBack = () => { 

  const particlesInit = useCallback(async (engine) => {
    console.log(engine);
    await loadFull(engine);
  }, []);


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

  
 

  return ( 
    
    <Particles
    id='tsparticles'
    particlesLoaded='particlesLoaded'
    init={particlesInit}
    loaded={particlesLoaded}
    options={ParticlesConfig}
    height='100vh'
    width='100vw'
  ></Particles>
  ); 
}  
export default ParticleBack; 

ParticlesConfig is Css for ParticleBack Component

const ParticlesConfig = {
    autoplay: true,
    fullScreen: {
      enable: true,
      zIndex: 1,
    },
    particles: {
      number: {
        value: 10,
        density: {
          enable: false,
          value_area: 800,
        },
      },
      color: {
        value: '#fff',
      },
      shape: {
        type: 'star',
        options: {
          sides: 5,
        },
      },
      opacity: {
        value: 0.8,
        random: false,
        anim: {
          enable: false,
          speed: 1,
          opacity_min: 0.1,
          sync: false,
        },
      },
      size: {
        value: 4,
        random: false,
        anim: {
          enable: false,
          speed: 40,
          size_min: 0.1,
          sync: false,
        },
      },
      rotate: {
        value: 0,
        random: true,
        direction: 'clockwise',
        animation: {
          enable: true,
          speed: 5,
          sync: false,
        },
      },
      line_linked: {
        enable: true,
        distance: 600,
        color: '#ffffff',
        opacity: 0.4,
        width: 2,
      },
      move: {
        enable: true,
        speed: 2,
        direction: 'none',
        random: false,
        straight: false,
        out_mode: 'out',
        attract: {
          enable: false,
          rotateX: 600,
          rotateY: 1200,
        },
      },
    },
    interactivity: {
      events: {
        onhover: {
          enable: true,
          mode: ['grab'],
        },
        onclick: {
          enable: false,
          mode: 'bubble',
        },
        resize: true,
      },
      modes: {
        grab: {
          distance: 400,
          line_linked: {
            opacity: 1,
          },
        },
        bubble: {
          distance: 400,
          size: 40,
          duration: 2,
          opacity: 8,
          speed: 3,
        },
        repulse: {
          distance: 200,
        },
        push: {
          particles_nb: 4,
        },
        remove: {
          particles_nb: 2,
        },
      },
    },
    retina_detect: true,
    background: {
      color: '#111',
      image: '',
      position: '50% 50%',
      repeat: 'no-repeat',
      size: 'cover',
    },
  };

I already Install :-

npm i react-tsparticles
npm i tsparticles

Version I am Using:-

"react-tsparticles": "^2.12.2",
"tsparticles": "^3.2.2",
"react": "^18",

Link for tsParticle Doc:- https://particles.js.org/ https://www.knowledgehut.com/blog/web-development/react-particles

Any suggestions and issues in my code ( Without useCallback give same issues so ingonre it )

I've tried many documentations and blogs, but the code is not working. I managed to get the background color, but the particles are not appearing. I expected to resolve my problem and find a valid solution for it.

Answer 1

Use these versions and re-install it, I think there is some problem with the recent version

"react-tsparticles": "^2.9.3",
"tsparticles": "^2.9.3"

Answer 2

Try

<Particles
 particlesInit={particlesInit}
 ...
/>

with

"react-tsparticles": "^2.12.2",
"tsparticles": "^3.3.0",
"react": "^18.2.0",

Answer 3

Try to use loadSlim instead of loadFull.

I had the same error. I don't know why, but I resoved the issue this way.

You need to install the deprecated version npm i tsparticles-slim. If you install this latest version npm i @tsparticles/slim, You might get the error again.

For more information, please refer this page. I got the idea from there. Is it in any way possible to use tsparticles with next.js and ssr?