What is the canonical idiom for importing Sigma Js ( or npm libs packaged in a similar manner )

[tantilla]

This is not an issue with Fresh, forgive my ignorance of ssr, vite, etc...

I am trying to get a simple example such as this working:

import Graph from "graphology";
import Sigma from "sigma";

const graph = new Graph();
graph.addNode("1", { label: "Node 1", x: 0, y: 0, size: 10, color: "blue" });
graph.addNode("2", { label: "Node 2", x: 1, y: 1, size: 20, color: "red" });
const renderer = new Sigma(
  graph,
  document.getElementById("container") as HTMLDivElement
);

Which I imagine should go into an island file with a simple preact wrapper like:

export function SigmaGraph() {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current) return;

// Do Sigma init here

  }, [containerRef.current]);

  return (
    <div
      ref={containerRef}
      style={{ width: "100%", height: "100vh", background: "#888" }}
    >
    </div>
  );
}

In deno.json I have these import entries:

    "graphology": "npm:graphology@0.26.0",
    "sigma": "npm:sigma@3.0.2",

The issue is the Graphology import throws errors in the island for apparent babel / node style imports and the Sigma import throws errors because it has browser only deps that should only be accessed behind IS_BROWSER. I have tried placating the vite's dismissal of the Graphology import with node polyfills, but only came up with a plethora of other errors and dynamically importing Sigma after IS_BROWER but got "TypeError: Failed to fetch dynamically imported module" with what looks like a valid path to the node_modules package. I can import Graphology in an api file, so I began scheming on doing the graph work there and passing a serialized result downstream or including simple cdn imports in the app html template and somehow accessing them, but before I go down any ratholes, wanted to check here first, as I feel I am fundamentally missing how Fresh and ssr work, as it shouldn't be this difficult to get started... Thanks for any advice or links to RTFM.

[MukundaKatta]

Sigma needs a DOM, so it has to live in an island — the setup looks right but Sigma's npm build also ships browser-only globals. Add "nodeModulesDir": "auto" to deno.json and import from npm: import Sigma from "npm:sigma@3". For graphology same treatment. Put all the Sigma work inside useEffect (which you're doing) so SSR skips it entirely, and you should see the canvas render.

[devhorizon999]

I think the main issue is that the island only solves part of the problem.

Fresh islands still get rendered on the server first, so if sigma or one of its dependencies touches window / document during import, it can still break even though the component is inside islands/.

What worked for me in similar cases is moving the browser-only imports into useEffect, so they only run in the browser:

This is "TypeScript Code":

import { useEffect, useRef } from "preact/hooks";

export default function SigmaGraph() {
const containerRef = useRef(null);

useEffect(() => {
let renderer: { kill: () => void } | undefined;
let cancelled = false;

(async () => {
  if (!containerRef.current) return;

  const [{ default: Graph }, { default: Sigma }] = await Promise.all([
    import("graphology"),
    import("sigma"),
  ]);

  if (cancelled || !containerRef.current) return;

  const graph = new Graph();

  graph.addNode("1", {
    label: "Node 1",
    x: 0,
    y: 0,
    size: 10,
    color: "blue",
  });

  graph.addNode("2", {
    label: "Node 2",
    x: 1,
    y: 1,
    size: 20,
    color: "red",
  });

  graph.addEdge("1", "2");

  renderer = new Sigma(graph, containerRef.current);
})();

return () => {
  cancelled = true;
  renderer?.kill();
};

}, []);

return (
<div
ref={containerRef}
style={{ width: "100%", height: "100vh" }}
/>
);
}