[Bug]: Error when using Vue 3 component in Nuxt 3

[talhabw]

Contact Details

talha@karasu.xyz

What happened?

I am trying to use your Vue 3 component in Nuxt 3. It works as expected, but there is an error on the console. ParticlesComponent is inside the <ClientOnly> tag, but that doesn't fix it.

Error on console:

Uncaught TypeError: can't access property "destroyed", n is undefined      vue3-particles.es.js:2400:10

tsParticles Version

2.2.3

Which library are you using?

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

tsParticles Configuration

{
  fullScreen: {
    enable: true,
    zIndex: 1
  },
  fps_limit: 60,
  interactivity: {
    detect_on: 'canvas',
    events: {
      onclick: { enable: true, mode: 'push' }, onhover: {
        enable: true, mode: 'attract',
        parallax: { enable: false, force: 60, smooth: 10 }
      }, resize: true
    }, modes: {
      push: { quantity: 4 }, attract: {
        distance: 200, duration: 0.4, factor: 5
      }
    }
  }, particles: {
    color: { value: '#e04622' }, line_linked: {
      color: 'e04622', distance: 150, enable: true, opacity: 0.4, width: 1
    }, move: {
      attract: {
        enable: false,
        rotateX: 600, rotateY: 1200
      }, bounce: false, direction: 'none', enable: true, out_mode: 'out', random: false,
      speed: 2, straight: false
    }, number: { density: { enable: true, value_area: 800 }, value: 80 }, opacity: {
      anim:
        { enable: false, opacity_min: 0.1, speed: 1, sync: false }, random: false, value: 0.5
    }, shape: {
      character: {
        fill: false, font: 'Verdana', style: '', value: '*', weight: '400'
      }, image: {
        height: 100, replace_color:
          true, src: 'images/github.svg', width: 100
      }, polygon: { nb_sides: 5 }, stroke: {
        color: '#e04622', width: 0
      }, type: 'circle'
    }, size: {
      anim: { enable: false, size_min: 0.1, speed: 40, sync: false }, random: true,
      value: 5
    }
  }, polygon: {
    draw: { enable: false, lineColor: '#e04622', lineWidth: 0.5 }, move: { radius: 10 },
    scale: 1, type: 'none', url: ''
  }, retina_detect: true
}

What browsers are you seeing the problem on?

Firefox, Chrome, Microsoft Edge

Relevant log output

Uncaught TypeError: can't access property "destroyed", n is undefined
    NuxtJS 34
        P
        play
        intersectionManager
        vs
        vs
        loadOptions
        load
        load
        mounted
        nextTick
        mounted
        callWithErrorHandling
        callWithAsyncErrorHandling
        __weh
        flushPostFlushCbs
        flushJobs
        promise callback*queueFlush
        queueCb
        queuePostFlushCb
        resolve
        hydrateSuspense
        hydrateNode
        hydrateSubTree
        componentUpdateFn
        run
        update
        setupRenderEffect
        mountComponent
        hydrateNode
        hydrate2
        mount
        mount
        initApp
        async*
vue3-particles.es.js:2400:10

Code of Conduct

• I agree to follow this project's Code of Conduct

[matteobruni]

Hi @talhabw, I need a reproducible sample to see more error details. I don't have that error in the Nuxt 3 demo here: https://github.com/tsparticles/nuxt3-particles-demo

[matteobruni]

Ok, it's not necessary providing a sample. I've seen that the #4606 is still a thing, the guardCheck function has a bug. It happens only in detectsOn: "canvas".

[talhabw]

Hi, sorry for not providing an example from the start. You are indeed right, I experimented with my config a little and realized it only happens when detectsOn: "canvas".