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

RCRalph · 2024-02-04T00:25:32Z

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?

The text was updated successfully, but these errors were encountered:

arieslee · 2024-02-06T13:51:40Z

I also have the same problem

arieslee · 2024-02-06T13:53:08Z

like that

RCRalph · 2024-02-06T14:51:35Z

Steps to reproduce:

Create a new Vue 3 + Vite project using:
```
npm create vue@latest
```
Move to newly created directory and run:
```
npm install
```

Install tsparticles using:

npm install @tsparticles/vue3 tsparticles

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')

Start development server using:
```
npm run dev
```
Open the application using a browser, observe the error in the console.

HaileInnoTech · 2024-02-08T09:27:31Z

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

RCRalph · 2024-02-08T17:19:17Z

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

matteobruni · 2024-02-08T19:23:42Z

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

kimmin920 · 2024-02-09T16:08:19Z

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",

matteobruni · 2024-02-09T19:25:26Z

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

modbender · 2024-02-09T19:39:27Z

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 · 2024-02-09T22:34:44Z

The same issue occurs with Angular as well.

matteobruni · 2024-02-09T23:53:51Z

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 · 2024-02-09T23:54:03Z

The same issue occurs with Angular as well.

The core is the same for every component library

modbender · 2024-02-10T06:16:18Z

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"
  }

fakhrul10 · 2024-02-11T18:07:46Z

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?

modbender · 2024-02-15T05:04:47Z

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

WH934426 · 2024-02-15T07:16:02Z

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 · 2024-02-20T11:10:28Z

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

HaileInnoTech · 2024-02-23T01:22:02Z

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 · 2024-02-28T11:48:11Z

Issue fixed after release of tsparticles 3.3.0, thank you

matteobruni mentioned this issue Feb 8, 2024

Vector.js error tsparticles/react#83

Closed

matteobruni mentioned this issue Feb 11, 2024

[Bug]: Class extends value undefined is not a constructor or null tsparticles/tsparticles#5305

Closed

1 task

RCRalph closed this as completed Feb 28, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

RCRalph commented Feb 4, 2024

arieslee commented Feb 6, 2024

arieslee commented Feb 6, 2024

RCRalph commented Feb 6, 2024 •

edited

HaileInnoTech commented Feb 8, 2024

RCRalph commented Feb 8, 2024

matteobruni commented Feb 8, 2024

kimmin920 commented Feb 9, 2024

matteobruni commented Feb 9, 2024

modbender commented Feb 9, 2024

Yves-X commented Feb 9, 2024

matteobruni commented Feb 9, 2024

matteobruni commented Feb 9, 2024

modbender commented Feb 10, 2024 •

edited

fakhrul10 commented Feb 11, 2024

modbender commented Feb 15, 2024

WH934426 commented Feb 15, 2024

CDzungx commented Feb 20, 2024

HaileInnoTech commented Feb 23, 2024

RCRalph commented Feb 28, 2024

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

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

Comments

RCRalph commented Feb 4, 2024

arieslee commented Feb 6, 2024

arieslee commented Feb 6, 2024

RCRalph commented Feb 6, 2024 • edited

HaileInnoTech commented Feb 8, 2024

RCRalph commented Feb 8, 2024

matteobruni commented Feb 8, 2024

kimmin920 commented Feb 9, 2024

matteobruni commented Feb 9, 2024

modbender commented Feb 9, 2024

Yves-X commented Feb 9, 2024

matteobruni commented Feb 9, 2024

matteobruni commented Feb 9, 2024

modbender commented Feb 10, 2024 • edited

fakhrul10 commented Feb 11, 2024

modbender commented Feb 15, 2024

WH934426 commented Feb 15, 2024

CDzungx commented Feb 20, 2024

HaileInnoTech commented Feb 23, 2024

RCRalph commented Feb 28, 2024

RCRalph commented Feb 6, 2024 •

edited

modbender commented Feb 10, 2024 •

edited