[Bug] TypeError: Cannot read property 'circle' of undefined in Next.JS

[JaeWangL]

I'm working this library with next.js

    "next": "10.0.5",
    "react": "^17.0.1",
    "react-particles-js": "^3.4.1",

      <Particles
        params={{
          particles: {
            number: {
              value: 160,
              density: {
                enable: false,
              },
            },
            size: {
              value: 3,
              random: true,
              anim: {
                speed: 4,
                size_min: 0.3,
              },
            },
            line_linked: {
              enable: false,
            },
            move: {
              random: true,
              speed: 1,
              direction: 'top',
              out_mode: 'out',
            },
          },
          interactivity: {
            events: {
              onhover: {
                enable: true,
                mode: 'bubble',
              },
              onclick: {
                enable: true,
                mode: 'repulse',
              },
            },
            modes: {
              bubble: {
                distance: 250,
                duration: 2,
                size: 0,
                opacity: 0,
              },
              repulse: {
                distance: 400,
                duration: 4,
              },
            },
          },
        }}
      />

But when I run my app package says "TypeError: Cannot read property 'circle' of undefined"

[ThanadetManichote]

I am too .

"next": "10.0.3", "react": "17.0.1", "react-particles-js": "3.4.1",

[traubas]

me too. it worked until today. been working with it for the last 1 year.

[matteobruni]

Hi @JaeWangL and @traubas,

You can fix that installing tsparticles@1.19.2. I made a change in 1.19.3 that broke this package. I’ll fix it ASAP.

Sorry for the inconvenience

[JaeWangL]

Hi @JaeWangL and @traubas,

You can fix that installing tsparticles@1.19.2. I made a change in 1.19.3 that broke this package. I’ll fix it ASAP.

Sorry for the inconvenience

This work!! Thank you~~

[Ayoubho22]

is it like npm install tsparticles@1.19.2 ?? I'm new to React, anyway when I run the command nothing change it's still giving me the error 'TypeError: Cannot read property 'circle' of undefined' thanks in advance

[GitGitBoom]

@Ayoubho22 you need to replace the sub-dependency. In yarn you can use resolutions. Npm is a bit more of a pain.

Yarn: https://classic.yarnpkg.com/en/docs/selective-version-resolutions/

NPM: https://stackoverflow.com/questions/15806152/how-do-i-override-nested-npm-dependency-versions

Thanks @matteobruni for the quick support.

[matteobruni]

I released 1.19.4 with the bug fix. Everything should be fine now.

[RilleMichi]

Hi @GitGitBoom

Can you maybe write it down (with yarn)? I tried, but it didn't work. Thanks in advanced. Im also just a beginner :)

[matteobruni]

@RilleMichi just update the tsparticles dependency and you're done

[wufe]

@lindelof tsparticles is not an advertised library, but a dependency of react-particles-js. @matteobruni is the creator of tsparticles, so listen to him

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.