tsparticles / svelte

Svelte tsParticles official plugin
MIT License
43 stars 3 forks source link

[Bug]: Svelte Particle do not show in official example: "error adding particle: TypeError: value is undefined" #18

Closed MarArMar closed 1 year ago

MarArMar commented 1 year ago

What happened?

I created a SvelteKit Skeleton Project

Added tsparticles 2.9.3

Copy pasted the example code for SSR sveltekit given at npmjs.com/package/svelte-particles

Page is entirely white, only shows "Hello" text, and this is the console output

Here is the full example Repo : MarArMar/SvelteKitParticles

Just run

npm install
vite dev --open

tsParticles Version

2.9.3

tsParticles Configuration

{
    particles: {
      color: {
        value: '#000',
      },
      links: {
        enable: true,
        color: '#000',
      },
      move: {
        enable: true,
      },
      number: {
        value: 100,
      },
    },
  }

What browsers are you seeing the problem on?

Firefox, Chrome

Relevant log output

From browser's console

Loading failed for the module with source “http://127.0.0.1:5176/node_modules/.vite/deps/svelte-particles.js?v=c827fe42”. [127.0.0.1:5176:13:11](http://127.0.0.1:5176/)
Uncaught (in promise) TypeError: error loading dynamically imported module [+page.svelte:135:2](http://127.0.0.1:5176/src/routes/+page.svelte)
[vite] connecting... [client.ts:18:8](http://127.0.0.1:5176/@vite/client.ts)
[vite] connected. [client.ts:133:14](http://127.0.0.1:5176/@vite/client.ts)
Use of drawWindow method from CanvasRenderingContext2D is deprecated. Use tabs.captureTab extensions API instead https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/API/tabs/captureTab [pagedata-script.js:1:12439](moz-extension://45d46438-cc62-43a3-bb25-4787be3c8cb1/content/pagedata-script.js)
<Particles> was created with unknown prop 'class' [client.js:1987:15](http://127.0.0.1:5176/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=8f04e0e5)
<Particles> was created with unknown prop 'style' [client.js:1987:15](http://127.0.0.1:5176/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=8f04e0e5)
error adding particle: TypeError: value is undefined 100 [client.js:1987:15](http://127.0.0.1:5176/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=8f04e0e5)
matteobruni commented 1 year ago

Why are you using 2.9.3? Is 2.10.1 affected as well?

Have you checked this?

MarArMar commented 1 year ago

Thanks, it worked by updating the versions and implementing the linked solution.