[BUG?] TypeError: interactor.init is not a function

[ArmyaAli]

Hello I tried the steps in the readme I can't get this to work with my Astro code, am I doing this correclty? Browser throws this:

InteractionManager.js:31 Uncaught (in promise) TypeError: interactor.init is not a function at InteractionManager.init (InteractionManager.js:31:24) at Particles.init (Particles.js:155:34) at Container.init (Container.js:301:24) at async Container.start (Container.js:404:9) at async Engine._loadParams (Engine.js:278:9) at async Particles.astro:40:33

---
import BaseLayout from "../layouts/BaseLayout.astro";
import HorizontalCard from "../components/HorizontalCard.astro";
import { projects } from "../data/projects";

import Particles from "astro-particles";
import type { ISourceOptions } from "tsparticles-engine";

const options: ISourceOptions = {
  background: {
    color: "#000",
  },
  fullScreen: {
    zIndex: -1,
  },
  particles: {
    number: {
      value: 100,
    },
    move: {
      enable: true,
    },
  },
};
---

<BaseLayout sideBarActiveItemID="home">
  <div class="pb-12 mt-5">
    <div class="text-xl py-1">Hey there 👋</div>
    <div class="text-5xl font-bold">
      <dynamic-name>
        <span>Ali Umar</span>
      </dynamic-name>
    </div>
    <div class="text-3xl py-3 font-bold">
      Software Engineer and Technology Enthusiast
    </div>
    <div class="py-2">
      <text class="text-lg"> </text>
    </div>
    <div class="mt-8">
      <a
        class="btn btn-outline"
        href="https://twitter.com/alilikestech"
        target="_blank"
      >
        Let's connect!</a
      >
      <a
        href="https://github.com/ArmyaAli"
        target="_blank"
        class="btn btn-outline ml-5"
      >
        View my GitHub
      </a>
    </div>
  </div>

  <div>
    <div class="text-3xl w-full font-bold mb-2">
      Some cool projects... {"</>"}
    </div>
  </div>

  <div>
    {
      projects.map((entry, i) => {
        return (
          <HorizontalCard
            title={entry.title}
            img={entry.icon}
            desc={entry.description}
            url={entry.link}
            badge={entry.type}
          />
        );
      })
    }
  </div>
</BaseLayout>
<script>
  // This piece of code animates "Ali Umar" by adding chars to DynamicName.text
  // When one complete cycle is reached, we only cycle Ali Uma + r repeatedly
  class DynamicName extends HTMLElement {
    text = "A";
    count = 1;
    constructor() {
      super();
      const span = this.querySelector("span");
      setInterval(() => {
        const name = "Ali Umar";
        if (span) span.textContent = this.text;
        if (this.text != name) this.text += name[this.count++];
        else {
          this.count = name.length - 1;
          this.text = "Ali Uma";
        }
      }, 500);
    }
  }
  customElements.define("dynamic-name", DynamicName);
</script>
<script>
  import { type Container, type Engine, tsParticles } from "tsparticles-engine";
  import { loadFull } from "tsparticles";

  // the function name is the parameter passed to the init attribute
  // required
  // add the function to window is mandatory, it will be searched there
  declare global {
    interface Window {
      particlesInit: (engine: Engine) => Promise<void>;
      particlesLoaded: (container: Container) => void;
    }
  }

  window.particlesInit = async function (engine: any) {
    await loadFull(engine);
  };

  // the function name is the parameter passed to the loaded attribute
  // optional
  // add the function to window is mandatory, it will be searched there
  window.particlesLoaded = function (container: Container) {
    console.log("particlesLoaded callback");
  };
</script>
<Particles id="tsparticles" options={options} init="particlesInit" />

package.json

{
  "name": "portfolio",
  "description": "Ali's Portfolio",
  "type": "module",
  "version": "3.0.0",
  "private": true,
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "@astrojs/mdx": "^2.0.3",
    "@astrojs/rss": "^3.0.0",
    "@astrojs/sitemap": "^3.0.1",
    "@astrojs/tailwind": "^5.0.3",
    "@tailwindcss/typography": "^0.5.10",
    "@tsparticles/engine": "^3.3.0",
    "astro": "^4.0.2",
    "astro-particles": "^2.10.0",
    "daisyui": "^4.4.10",
    "dayjs": "^1.11.9",
    "sharp": "^0.32.6",
    "tailwindcss": "^3.3.5",
    "tsparticles": "^3.3.0",
    "typescript": "^5.4.2"
  },
  "devDependencies": {
    "prettier": "^3.2.5",
    "prettier-plugin-astro": "^0.13.0"
  }
}

Seems like it's catching here:

Thank you! Ali

[matteobruni]

https://github.com/tsparticles/astro/issues/21#issuecomment-1992873751

Astro Particles is not compatible with tsParticles v3

[ArmyaAli]

Oh I see Thanks

[ArmyaAli]

working with tsparticles 2.12.0