tsparticles/vue3

Uncaught TypeError: class heritage Vector3d is not an object or null

RCRalph opened this issue · 19 comments

RCRalph commented

Greetings,

I tried to utilize the tsparticles library in my Vue 3 project using Vite.
Unfortunately, after following instructions provided in this repository the app does not load anymore.
In the console I found the following error:

Uncaught TypeError: class heritage Vector3d is not an object or null
    <anonymous> Vector.js:7
Vector.js:7:7

Vector.js points to this file in the repository.
The issue occured in both Firefox and Chromium.

Is there anything I could do to resolve this issue?

arieslee commented

I also have the same problem
image

arieslee commented

like that
image

  • 👍2
RCRalph commented

Steps to reproduce:

  1. Create a new Vue 3 + Vite project using: 
    npm create vue@latest
  2. Move to newly created directory and run: 
    npm install
  3. Install tsparticles using: 
    npm install @tsparticles/vue3 tsparticles
  4. Replace content of src/main.js with: 
    import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import Particles from "@tsparticles/vue3";
import { loadFull } from "tsparticles";

const app = createApp(App)

app.use(Particles, {
  init: async engine => {
    await loadFull(engine);
  },
});

createApp(App).mount('#app')
  5. Start development server using: 
    npm run dev
  6. Open the application using a browser, observe the error in the console.
HaileInnoTech commented

Hello guys, I tried to implement with the instruction but also but the same error of Vector3d.js
image

RCRalph commented

@matteobruni It seems like the Vue 3 plugin might not work properly, is there any way you could help us fix it?

matteobruni commented

It’s a problem with 3.2.1, I already discussed this on Discord. I’m looking for a solution, there’s a problem with dynamic imports and Vite.

You can install 3.1.0 (all packages needed) for the core library

  • ❤️2
kimmin920 commented

im using react and i install suggested version for core,
and alsl did delete-and-install node_modules and lock-json.
but still have same problem..

any suggestion please..!!

"@tsparticles/engine": "^3.1.0",
"@tsparticles/react": "^3.0.0",
"@tsparticles/slim": "^3.1.0",
  • 👍2
matteobruni commented

im using react and i install suggested version for core, and alsl did delete-and-install node_modules and lock-json. but still have same problem..

any suggestion please..!!

"@tsparticles/engine": "^3.1.0",
"@tsparticles/react": "^3.0.0",
"@tsparticles/slim": "^3.1.0",

I've said all packages for a reason, every tsparticles package needs to be 3.1.0

  • 👍1
modbender commented

I had to ask Chat GPT to extract it from my yarn.lock

"resolutions": {
    "@tsparticles/basic": "3.1.0",
    "@tsparticles/engine": "3.1.0",
    "@tsparticles/interaction-external-attract": "3.1.0",
    "@tsparticles/interaction-external-bounce": "3.1.0",
    "@tsparticles/interaction-external-bubble": "3.1.0",
    "@tsparticles/interaction-external-connect": "3.1.0",
    "@tsparticles/interaction-external-grab": "3.1.0",
    "@tsparticles/interaction-external-pause": "3.1.0",
    "@tsparticles/interaction-external-push": "3.1.0",
    "@tsparticles/interaction-external-remove": "3.1.0",
    "@tsparticles/interaction-external-repulse": "3.1.0",
    "@tsparticles/interaction-external-slow": "3.1.0",
    "@tsparticles/interaction-external-trail": "3.1.0",
    "@tsparticles/interaction-particles-attract": "3.1.0",
    "@tsparticles/interaction-particles-collisions": "3.1.0",
    "@tsparticles/interaction-particles-links": "3.1.0",
    "@tsparticles/move-base": "3.1.0",
    "@tsparticles/move-parallax": "3.1.0",
    "@tsparticles/plugin-absorbers": "3.1.0",
    "@tsparticles/plugin-emitters": "3.1.0",
    "@tsparticles/plugin-emitters-shape-circle": "3.1.0",
    "@tsparticles/plugin-emitters-shape-square": "3.1.0",
    "@tsparticles/plugin-easing-quad": "3.1.0",
    "@tsparticles/shape-circle": "3.1.0",
    "@tsparticles/shape-emoji": "3.1.0",
    "@tsparticles/shape-image": "3.1.0",
    "@tsparticles/shape-line": "3.1.0",
    "@tsparticles/shape-polygon": "3.1.0",
    "@tsparticles/shape-square": "3.1.0",
    "@tsparticles/shape-star": "3.1.0",
    "@tsparticles/shape-text": "3.1.0",
    "@tsparticles/slim": "3.1.0",
    "@tsparticles/updater-color": "3.1.0",
    "@tsparticles/updater-destroy": "3.1.0",
    "@tsparticles/updater-life": "3.1.0",
    "@tsparticles/updater-opacity": "3.1.0",
    "@tsparticles/updater-out-modes": "3.1.0",
    "@tsparticles/updater-roll": "3.1.0",
    "@tsparticles/updater-rotate": "3.1.0",
    "@tsparticles/updater-size": "3.1.0",
    "@tsparticles/updater-stroke-color": "3.1.0",
    "@tsparticles/updater-tilt": "3.1.0",
    "@tsparticles/updater-twinkle": "3.1.0",
    "@tsparticles/updater-wobble": "3.1.0",
    "string-width": "4.2.3"
}

And yet not working, maybe I'm missing some package,
I'm getting this warning

tsParticles - Error adding particle: TypeError: updater.init is not a function

Yves-X commented

The same issue occurs with Angular as well.

matteobruni commented

I had to ask Chat GPT to extract it from my yarn.lock

"resolutions": {
    "@tsparticles/basic": "3.1.0",
    "@tsparticles/engine": "3.1.0",
    "@tsparticles/interaction-external-attract": "3.1.0",
    "@tsparticles/interaction-external-bounce": "3.1.0",
    "@tsparticles/interaction-external-bubble": "3.1.0",
    "@tsparticles/interaction-external-connect": "3.1.0",
    "@tsparticles/interaction-external-grab": "3.1.0",
    "@tsparticles/interaction-external-pause": "3.1.0",
    "@tsparticles/interaction-external-push": "3.1.0",
    "@tsparticles/interaction-external-remove": "3.1.0",
    "@tsparticles/interaction-external-repulse": "3.1.0",
    "@tsparticles/interaction-external-slow": "3.1.0",
    "@tsparticles/interaction-external-trail": "3.1.0",
    "@tsparticles/interaction-particles-attract": "3.1.0",
    "@tsparticles/interaction-particles-collisions": "3.1.0",
    "@tsparticles/interaction-particles-links": "3.1.0",
    "@tsparticles/move-base": "3.1.0",
    "@tsparticles/move-parallax": "3.1.0",
    "@tsparticles/plugin-absorbers": "3.1.0",
    "@tsparticles/plugin-emitters": "3.1.0",
    "@tsparticles/plugin-emitters-shape-circle": "3.1.0",
    "@tsparticles/plugin-emitters-shape-square": "3.1.0",
    "@tsparticles/plugin-easing-quad": "3.1.0",
    "@tsparticles/shape-circle": "3.1.0",
    "@tsparticles/shape-emoji": "3.1.0",
    "@tsparticles/shape-image": "3.1.0",
    "@tsparticles/shape-line": "3.1.0",
    "@tsparticles/shape-polygon": "3.1.0",
    "@tsparticles/shape-square": "3.1.0",
    "@tsparticles/shape-star": "3.1.0",
    "@tsparticles/shape-text": "3.1.0",
    "@tsparticles/slim": "3.1.0",
    "@tsparticles/updater-color": "3.1.0",
    "@tsparticles/updater-destroy": "3.1.0",
    "@tsparticles/updater-life": "3.1.0",
    "@tsparticles/updater-opacity": "3.1.0",
    "@tsparticles/updater-out-modes": "3.1.0",
    "@tsparticles/updater-roll": "3.1.0",
    "@tsparticles/updater-rotate": "3.1.0",
    "@tsparticles/updater-size": "3.1.0",
    "@tsparticles/updater-stroke-color": "3.1.0",
    "@tsparticles/updater-tilt": "3.1.0",
    "@tsparticles/updater-twinkle": "3.1.0",
    "@tsparticles/updater-wobble": "3.1.0",
    "string-width": "4.2.3"
}

And yet not working, maybe I'm missing some package, I'm getting this warning

tsParticles - Error adding particle: TypeError: updater.init is not a function

"tsparticles" is missing

matteobruni commented

The same issue occurs with Angular as well.

The core is the same for every component library

modbender commented

Ok now it's working,
the full resolutions in package.json is this

Simply add it to package.json and run npm i or yarn install.

Important

Remember to keep tsparticles 3.1.0 and @tsparticles/vue3 3.0.0 (for my Vue 3 project) in package.json dependencies (or devDependencies) section.

  "resolutions": {
    "tsparticles": "3.1.0",
    "@tsparticles/basic": "3.1.0",
    "@tsparticles/engine": "3.1.0",
    "@tsparticles/interaction-external-attract": "3.1.0",
    "@tsparticles/interaction-external-bounce": "3.1.0",
    "@tsparticles/interaction-external-bubble": "3.1.0",
    "@tsparticles/interaction-external-connect": "3.1.0",
    "@tsparticles/interaction-external-grab": "3.1.0",
    "@tsparticles/interaction-external-pause": "3.1.0",
    "@tsparticles/interaction-external-push": "3.1.0",
    "@tsparticles/interaction-external-remove": "3.1.0",
    "@tsparticles/interaction-external-repulse": "3.1.0",
    "@tsparticles/interaction-external-slow": "3.1.0",
    "@tsparticles/interaction-external-trail": "3.1.0",
    "@tsparticles/interaction-particles-attract": "3.1.0",
    "@tsparticles/interaction-particles-collisions": "3.1.0",
    "@tsparticles/interaction-particles-links": "3.1.0",
    "@tsparticles/move-base": "3.1.0",
    "@tsparticles/move-parallax": "3.1.0",
    "@tsparticles/plugin-absorbers": "3.1.0",
    "@tsparticles/plugin-emitters": "3.1.0",
    "@tsparticles/plugin-emitters-shape-circle": "3.1.0",
    "@tsparticles/plugin-emitters-shape-square": "3.1.0",
    "@tsparticles/plugin-easing-quad": "3.1.0",
    "@tsparticles/shape-circle": "3.1.0",
    "@tsparticles/shape-emoji": "3.1.0",
    "@tsparticles/shape-image": "3.1.0",
    "@tsparticles/shape-line": "3.1.0",
    "@tsparticles/shape-polygon": "3.1.0",
    "@tsparticles/shape-square": "3.1.0",
    "@tsparticles/shape-star": "3.1.0",
    "@tsparticles/shape-text": "3.1.0",
    "@tsparticles/slim": "3.1.0",
    "@tsparticles/updater-color": "3.1.0",
    "@tsparticles/updater-destroy": "3.1.0",
    "@tsparticles/updater-life": "3.1.0",
    "@tsparticles/updater-opacity": "3.1.0",
    "@tsparticles/updater-out-modes": "3.1.0",
    "@tsparticles/updater-roll": "3.1.0",
    "@tsparticles/updater-rotate": "3.1.0",
    "@tsparticles/updater-size": "3.1.0",
    "@tsparticles/updater-stroke-color": "3.1.0",
    "@tsparticles/updater-tilt": "3.1.0",
    "@tsparticles/updater-twinkle": "3.1.0",
    "@tsparticles/updater-wobble": "3.1.0",
    "string-width": "4.2.3"
  }
  • 👀1
fakhrul10 commented

Ok now it's working, the full resolutions in package.json is this

  "resolutions": {
    "tsparticles": "3.1.0",
    "@tsparticles/basic": "3.1.0",
    "@tsparticles/engine": "3.1.0",
    "@tsparticles/interaction-external-attract": "3.1.0",
    "@tsparticles/interaction-external-bounce": "3.1.0",
    "@tsparticles/interaction-external-bubble": "3.1.0",
    "@tsparticles/interaction-external-connect": "3.1.0",
    "@tsparticles/interaction-external-grab": "3.1.0",
    "@tsparticles/interaction-external-pause": "3.1.0",
    "@tsparticles/interaction-external-push": "3.1.0",
    "@tsparticles/interaction-external-remove": "3.1.0",
    "@tsparticles/interaction-external-repulse": "3.1.0",
    "@tsparticles/interaction-external-slow": "3.1.0",
    "@tsparticles/interaction-external-trail": "3.1.0",
    "@tsparticles/interaction-particles-attract": "3.1.0",
    "@tsparticles/interaction-particles-collisions": "3.1.0",
    "@tsparticles/interaction-particles-links": "3.1.0",
    "@tsparticles/move-base": "3.1.0",
    "@tsparticles/move-parallax": "3.1.0",
    "@tsparticles/plugin-absorbers": "3.1.0",
    "@tsparticles/plugin-emitters": "3.1.0",
    "@tsparticles/plugin-emitters-shape-circle": "3.1.0",
    "@tsparticles/plugin-emitters-shape-square": "3.1.0",
    "@tsparticles/plugin-easing-quad": "3.1.0",
    "@tsparticles/shape-circle": "3.1.0",
    "@tsparticles/shape-emoji": "3.1.0",
    "@tsparticles/shape-image": "3.1.0",
    "@tsparticles/shape-line": "3.1.0",
    "@tsparticles/shape-polygon": "3.1.0",
    "@tsparticles/shape-square": "3.1.0",
    "@tsparticles/shape-star": "3.1.0",
    "@tsparticles/shape-text": "3.1.0",
    "@tsparticles/slim": "3.1.0",
    "@tsparticles/updater-color": "3.1.0",
    "@tsparticles/updater-destroy": "3.1.0",
    "@tsparticles/updater-life": "3.1.0",
    "@tsparticles/updater-opacity": "3.1.0",
    "@tsparticles/updater-out-modes": "3.1.0",
    "@tsparticles/updater-roll": "3.1.0",
    "@tsparticles/updater-rotate": "3.1.0",
    "@tsparticles/updater-size": "3.1.0",
    "@tsparticles/updater-stroke-color": "3.1.0",
    "@tsparticles/updater-tilt": "3.1.0",
    "@tsparticles/updater-twinkle": "3.1.0",
    "@tsparticles/updater-wobble": "3.1.0",
    "string-width": "4.2.3"
  }

Did you have to individually install it one by one? What was the method you used?

  • ❤️2
modbender commented

Simply add it to package.json and run npm i or yarn install.

  • 👍1
WH934426 commented

After adding the dependency, but the page reported an error, the reason is Failed to resolve import "@tsparticles/vue3" from "src/main.js". Does the file exist?, how to modify main.js ?

CDzungx commented

upgrade to 3.2.2 seem to fix the error (no error displayed) but nothing is displayed

HaileInnoTech commented

Ok now it's working, the full resolutions in package.json is this

Simply add it to package.json and run npm i or yarn install.

Important

Remember to keep tsparticles 3.1.0 and @tsparticles/vue3 3.0.0 (for my Vue 3 project) in package.json dependencies (or devDependencies) section.

  "resolutions": {
    "tsparticles": "3.1.0",
    "@tsparticles/basic": "3.1.0",
    "@tsparticles/engine": "3.1.0",
    "@tsparticles/interaction-external-attract": "3.1.0",
    "@tsparticles/interaction-external-bounce": "3.1.0",
    "@tsparticles/interaction-external-bubble": "3.1.0",
    "@tsparticles/interaction-external-connect": "3.1.0",
    "@tsparticles/interaction-external-grab": "3.1.0",
    "@tsparticles/interaction-external-pause": "3.1.0",
    "@tsparticles/interaction-external-push": "3.1.0",
    "@tsparticles/interaction-external-remove": "3.1.0",
    "@tsparticles/interaction-external-repulse": "3.1.0",
    "@tsparticles/interaction-external-slow": "3.1.0",
    "@tsparticles/interaction-external-trail": "3.1.0",
    "@tsparticles/interaction-particles-attract": "3.1.0",
    "@tsparticles/interaction-particles-collisions": "3.1.0",
    "@tsparticles/interaction-particles-links": "3.1.0",
    "@tsparticles/move-base": "3.1.0",
    "@tsparticles/move-parallax": "3.1.0",
    "@tsparticles/plugin-absorbers": "3.1.0",
    "@tsparticles/plugin-emitters": "3.1.0",
    "@tsparticles/plugin-emitters-shape-circle": "3.1.0",
    "@tsparticles/plugin-emitters-shape-square": "3.1.0",
    "@tsparticles/plugin-easing-quad": "3.1.0",
    "@tsparticles/shape-circle": "3.1.0",
    "@tsparticles/shape-emoji": "3.1.0",
    "@tsparticles/shape-image": "3.1.0",
    "@tsparticles/shape-line": "3.1.0",
    "@tsparticles/shape-polygon": "3.1.0",
    "@tsparticles/shape-square": "3.1.0",
    "@tsparticles/shape-star": "3.1.0",
    "@tsparticles/shape-text": "3.1.0",
    "@tsparticles/slim": "3.1.0",
    "@tsparticles/updater-color": "3.1.0",
    "@tsparticles/updater-destroy": "3.1.0",
    "@tsparticles/updater-life": "3.1.0",
    "@tsparticles/updater-opacity": "3.1.0",
    "@tsparticles/updater-out-modes": "3.1.0",
    "@tsparticles/updater-roll": "3.1.0",
    "@tsparticles/updater-rotate": "3.1.0",
    "@tsparticles/updater-size": "3.1.0",
    "@tsparticles/updater-stroke-color": "3.1.0",
    "@tsparticles/updater-tilt": "3.1.0",
    "@tsparticles/updater-twinkle": "3.1.0",
    "@tsparticles/updater-wobble": "3.1.0",
    "string-width": "4.2.3"
  }

Thanks for this. It workes for me.

RCRalph commented

Issue fixed after release of tsparticles 3.3.0, thank you