Unable to have particles appear in Svelte Website

[ABansal11]

@matteobruni I am trying to implement the particles in a Svelte website. I have simply used the code from this repo in the app.svelte file. However, I have not been able to have the particles appear on the localhost server.

I am relatively new to this, so it may be an easy fix. I unfortunately could not find anything to make it work after many attempts.

My JS code is as follows:

  import Particles from "svelte-particles";
  import { loadSlim } from "tsparticles-slim"; 

  let particlesConfig = {
        particles: {
            color: {
                value: "#000",
            },
            links: {
                enable: true,
                color: "#000",
            },
            move: {
                enable: true,
            },
            number: {
                value: 100,
            },
            shape: {
              type: 'circle'
            },
            size: {
              value: {
                min: 1,
                max: 5

              }
            }
        },
        fullScreen: {
          enable: true,
          zIndex: 0
        }
    };
    let onParticlesLoaded = event => {
        const particlesContainer = event.detail.particles;
    };

    let particlesInit = async engine => {
        await loadSlim(engine);
    };

I place the HTML code as so:

<main>
    <nav>
    </nav>
    <Particles
         id="tsparticles"
         class="foo bar"
         style=""
         options={particlesConfig}
         on:particlesLoaded={onParticlesLoaded}
         particlesInit={particlesInit}
    />
</main>

[matteobruni]

Are you using SSR? Try this: https://github.com/tsparticles/svelte#ssr Are you using SvelteKit? Try this: https://github.com/tsparticles/svelte#sveltekit

If none of these, please provide a repo using CodeSandbox

[ABansal11]

@matteobruni I got the following error after restarting and trying to open the website in live view again: I am not using SvelteKit or SSR

[!](plugin svelte) ParseError: Unexpected token node_modules\svelte-particles\src\Particles.svelte 3: <script lang="ts"> 4: import { afterUpdate, createEventDispatcher, onDestroy } from "svelte"; 5: import type { ISourceOptions } from "tsparticles-engine"; ^ 6: import { tsParticles } from "tsparticles-engine"; 7: ParseError: Unexpected token at error (C:\svelte-tut\CHSwebdev.io\node_modules\svelte\src\compiler\utils\error.ts:25:16) at Parser$1.error (C:\svelte-tut\CHSwebdev.io\node_modules\svelte\src\compiler\parse\index.ts:105:3) at Parser$1.acorn_error (C:\svelte-tut\CHSwebdev.io\node_modules\svelte\src\compiler\parse\index.ts:98:8) at Object.read_script [as read] (C:\svelte-tut\CHSwebdev.io\node_modules\svelte\src\compiler\parse\read\script.ts:43:10) at tag (C:\svelte-tut\CHSwebdev.io\node_modules\svelte\src\compiler\parse\state\tag.ts:211:27) at new Parser$1 (C:\svelte-tut\CHSwebdev.io\node_modules\svelte\src\compiler\parse\index.ts:57:12) at parse (C:\svelte-tut\CHSwebdev.io\node_modules\svelte\src\compiler\parse\index.ts:230:17) at compile (C:\svelte-tut\CHSwebdev.io\node_modules\svelte\src\compiler\compile\index.ts:122:14) at Object.transform (C:\svelte-tut\CHSwebdev.io\node_modules\rollup-plugin-svelte\index.js:111:21) at C:\svelte-tut\CHSwebdev.io\node_modules\rollup\dist\shared\rollup.js:22795:37

[matteobruni]

Ok it's a TypeScript error, try this: https://github.com/tsparticles/svelte#typescript-errors

[ABansal11]

@matteobruni Thanks for help so far. I tried the TypeScript fix, but did not work. I believe reason for this is that the mentioned steps are for SvelteKit projects only.

[matteobruni]

I've tried using the instructions from the Svelte Website, using Vite and not SvelteKit, and everything worked as expected.

I've run this commands: https://svelte.dev/docs/introduction#start-a-new-project-alternatives-to-sveltekit

And installed svelte-particles and tsparticles, added the code from the readme of this repository using tsparticles instead of tsparticles-slim (but it doesn't matter) and it worked.

I need more details on your configuration. I think something is missing on your side.

[ABansal11]

As you previously requested, I have put the code into a repo using CodeSandbox. I hope that can help.

Repo Link

[matteobruni]

As you previously requested, I have put the code into a repo using CodeSandbox. I hope that can help.

Repo Link

Project not found

[ABansal11]

Please try this:

Repo link

[matteobruni]

Ok there’s a section in the svelte website for that: https://svelte.dev/docs/typescript#setup-other-build-tools

try this and let me know

[ABansal11]

Yes thanks it worked.