Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Destroyed hook doesn't work perfectly [Bug]:

See original GitHub issue

Contact Details

contact@jozaguts.dev

What happened?

When enter the app it fires a console error, if navigates by vue-rotuer everything works fine!

TypeError: Cannot read properties of undefined (reading 'destroyed')

tsParticles Version

2.2.1

Which library are you using?

Vanilla (tsparticles), Vue.js 3.x (vue3-particles, particles.vue3)

tsParticles Configuration

particles: {
    number: {
      value: 400,
      density: {
        enable: true,
        value_area: 3000
      }
    },
    color: { value: '#ED1C24' },
    shape: {
      type: 'circle',
      stroke: {
        width: 0,
        color: '#000000'
      },
      polygon: { nb_sides: 3 },
      image: {
        src: 'img/github.svg',
        width: 100,
        height: 100
      }
    },
    opacity: {
      value: 0.5,
      random: true,
      anim: {
        enable: false,
        speed: 1,
        opacity_min: 0.1,
        sync: false
      }
    },
    size: {
      value: 3,
      random: true,
      anim: {
        enable: true,
        speed: 5,
        size_min: 0,
        sync: false
      }
    },
    line_linked: {
      enable: false,
      distance: 500,
      color: '#ffffff',
      opacity: 0.4,
      width: 2
    },
    move: {
      enable: true,
      speed: 7.8914764163227265,
      direction: 'top',
      random: true,
      straight: false,
      out_mode: 'out',
      bounce: false,
      attract: {
        enable: false,
        rotateX: 600,
        rotateY: 1200
      }
    },
  },
  interactivity: {
    detect_on: 'canvas',
    events: {
      onhover: {
        enable: false,
        mode: 'bubble'
      },
      onclick: {
        enable: false,
        mode: 'repulse'
      },
      resize: true
    },
    modes: {
      grab: {
        distance: 400,
        line_linked: { opacity: 0.5 }
      },
      bubble: {
        distance: 400,
        size: 4,
        duration: 0.3,
        opacity: 1
      },
      repulse: {
        distance: 200,
        duration: 0.4
      },
      push: { particles_nb: 4 },
      remove: { particles_nb: 2 },
    },
  },
  retina_detect: true,



### What browsers are you seeing the problem on?

Chrome

### Relevant log output

```shell
Uncaught TypeError: Cannot read properties of undefined (reading 'destroyed')
    at P (vue3-particles.es.js:2400:13)
    at play (vue3-particles.es.js:2554:10)
    at vs.intersectionManager (vue3-particles.es.js:2616:89)
    at IntersectionObserver.<anonymous> (vue3-particles.es.js:2423:326)

Code of Conduct

I agree to follow this project’s Code of Conduct

Issue Analytics

State:
Created a year ago
Reactions:2
Comments:7 (4 by maintainers)

Top GitHub Comments

1reaction

matteobrunicommented, Aug 20, 2022

You can find a working sample with Nuxt3 here: https://github.com/tsparticles/nuxt3-particles-demo

1reaction

matteobrunicommented, Aug 20, 2022

I’ve got the same issue. However, I found that detectsOn is not an option in tsparticles 2.x. Just remove detectsOn from your configuration

https://codesandbox.io/s/beautiful-wind-2u0btv?file=/src/App.js

detectsOn is a part of the interactivity options as you can see here: https://github.com/matteobruni/tsparticles/blob/da8deec63e830c07a7409731b96e0ab8c336bd70/engine/src/Options/Classes/Interactivity/Interactivity.ts#L19 and is set here: https://github.com/matteobruni/tsparticles/blob/da8deec63e830c07a7409731b96e0ab8c336bd70/engine/src/Options/Classes/Interactivity/Interactivity.ts#L60

About the CodeSandbox you sent, there is no error. Please share something that I can see that has the error you are reporting.