seraf•12mo ago

tsParticles & Deno

Hi, I’m working on a personal project with Deno & Lume. I’m trying to use tsParticles with preact. It seems to be some misconfiguration, but I don’t understand what I’m missing. Here is a PR of my code with a comment with captures : https://github.com/severindupouy/severin-dupouy.deno.dev/pull/1#pullrequestreview-1559886275 I’ve tried to make it work with a fresh install of Fresh, but it’s the same. If you have any lead… Thanks for the help !

GitHub

[tsParticles/preact] trying to make it work by severindupouy · Pull...

9 Replies

seraf•12mo ago

@misteroom Hi, I mention you here, if you have any idea about that. Thanks.

Óscar•12mo ago

Looks like Particles variable is not a function. Maybe it's an issue related to how it's exported (https://github.com/tsparticles/preact/blob/main/components/preact/index.js). Try to import it in a different way like import { Particles } from "..." or something like that.

seraf•12mo ago

Nope, doesn’t work neither.

Óscar•12mo ago

Can you import everything and inspect what do you got? For example

import * as particles from "..."

console.log(particles)

import * as particles from "..."

console.log(particles)

seraf•12mo ago

[Module: null prototype] {
  default: <ref *1> [Function: h] {
    defaultProps: {
      width: "100%",
      height: "100%",
      options: {},
      style: {},
      id: "tsparticles"
    },
    Particles: [Circular *1],
    default: [Circular *1]
  }
}

[Module: null prototype] {
  default: <ref *1> [Function: h] {
    defaultProps: {
      width: "100%",
      height: "100%",
      options: {},
      style: {},
      id: "tsparticles"
    },
    Particles: [Circular *1],
    default: [Circular *1]
  }
}

Óscar•12mo ago

This seems to work:

return (
    <Particles.default
      id="tsparticles"
      // init={particlesInit}
      // loaded={particlesLoaded}
      options={options}
    />
  );

return (
    <Particles.default
      id="tsparticles"
      // init={particlesInit}
      // loaded={particlesLoaded}
      options={options}
    />
  );

but you're using hooks and they don't work on server side

seraf•12mo ago

mmm… 😛 preact hooks can’t work SSR ?

Óscar•12mo ago

I don't think so. They are designed to track changes after user interaction or data loading.

seraf•12mo ago

ok. I thought that maybe preact-render-to-string could make them usable.