Sigma: could not find a suitable program for node type "circle"!

[vchabaux]

Hi,

I try to use react-sigma with a default React app template generate by create-react-app.

I use this the code from https://sim51.github.io/react-sigma/docs/start-setup in my App.tsx:

import { useEffect } from "react";
import Graph from "graphology";
import { SigmaContainer, useLoadGraph } from "@react-sigma/core";
import "@react-sigma/core/lib/react-sigma.min.css";

const sigmaStyle = { height: "500px", width: "500px" };

// Component that load the graph
export const LoadGraph = () => {
  const loadGraph = useLoadGraph();

  useEffect(() => {
    const graph = new Graph();
    graph.addNode("first", { x: 0, y: 0, size: 15, label: "My first node", color: "#FA4F40" });
    loadGraph(graph);
  }, [loadGraph]);

  return null;
};

// Component that display the graph
export const DisplayGraph = () => {
  return (
    <SigmaContainer style={sigmaStyle}>
      <LoadGraph />
    </SigmaContainer>
  );
};

export default function App() {
  return (
    <div className="App">
      <DisplayGraph />
    </div>
  );
}

All other files generated by create-react-app are unchanged.

I have this error when i run npm run start:

ERROR
Sigma: could not find a suitable program for node type "circle"!
addNodeToProgram@http://localhost:3000/static/js/bundle.js:43333:31
process@http://localhost:3000/static/js/bundle.js:42716:14
render@http://localhost:3000/static/js/bundle.js:43035:36
refresh@http://localhost:3000/static/js/bundle.js:43731:53
./node_modules/@react-sigma/core/lib/react-sigma_core.esm.min.js/_/<@http://localhost:3000/static/js/bundle.js:48932:95
./src/App.tsx/LoadGraph/<@http://localhost:3000/static/js/bundle.js:52:14
commitHookEffectListMount@http://localhost:3000/static/js/bundle.js:28161:30
commitPassiveMountOnFiber@http://localhost:3000/static/js/bundle.js:29654:42
commitPassiveMountEffects_complete@http://localhost:3000/static/js/bundle.js:29626:38
commitPassiveMountEffects_begin@http://localhost:3000/static/js/bundle.js:29616:45
commitPassiveMountEffects@http://localhost:3000/static/js/bundle.js:29606:38
flushPassiveEffectsImpl@http://localhost:3000/static/js/bundle.js:31489:32
flushPassiveEffects@http://localhost:3000/static/js/bundle.js:31442:18
./node_modules/react-dom/cjs/react-dom.development.js/commitRootImpl/<@http://localhost:3000/static/js/bundle.js:31257:13
workLoop@http://localhost:3000/static/js/bundle.js:38381:46
flushWork@http://localhost:3000/static/js/bundle.js:38359:18
performWorkUntilDeadline@http://localhost:3000/static/js/bundle.js:38596:25
EventHandlerNonNull*./node_modules/scheduler/cjs/scheduler.development.js/<@http://localhost:3000/static/js/bundle.js:38632:7
./node_modules/scheduler/cjs/scheduler.development.js@http://localhost:3000/static/js/bundle.js:38682:5
options.factory@http://localhost:3000/static/js/bundle.js:49912:31
__webpack_require__@http://localhost:3000/static/js/bundle.js:49341:32
fn@http://localhost:3000/static/js/bundle.js:49570:21
./node_modules/scheduler/index.js@http://localhost:3000/static/js/bundle.js:38697:20
options.factory@http://localhost:3000/static/js/bundle.js:49912:31
__webpack_require__@http://localhost:3000/static/js/bundle.js:49341:32
fn@http://localhost:3000/static/js/bundle.js:49570:21
./node_modules/react-dom/cjs/react-dom.development.js/<@http://localhost:3000/static/js/bundle.js:8163:40
./node_modules/react-dom/cjs/react-dom.development.js@http://localhost:3000/static/js/bundle.js:33876:5
options.factory@http://localhost:3000/static/js/bundle.js:49912:31
__webpack_require__@http://localhost:3000/static/js/bundle.js:49341:32
fn@http://localhost:3000/static/js/bundle.js:49570:21
./node_modules/react-dom/index.js@http://localhost:3000/static/js/bundle.js:33947:20
options.factory@http://localhost:3000/static/js/bundle.js:49912:31
__webpack_require__@http://localhost:3000/static/js/bundle.js:49341:32
fn@http://localhost:3000/static/js/bundle.js:49570:21
./node_modules/react-dom/client.js@http://localhost:3000/static/js/bundle.js:33890:28
options.factory@http://localhost:3000/static/js/bundle.js:49912:31
__webpack_require__@http://localhost:3000/static/js/bundle.js:49341:32
fn@http://localhost:3000/static/js/bundle.js:49570:21
./src/index.tsx@http://localhost:3000/static/js/bundle.js:140:93
options.factory@http://localhost:3000/static/js/bundle.js:49912:31
__webpack_require__@http://localhost:3000/static/js/bundle.js:49341:32
@http://localhost:3000/static/js/bundle.js:50558:56
@http://localhost:3000/static/js/bundle.js:50560:12

Thank you if you can help !

Versions:

    "@react-sigma/core": "^4.0.1",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.95",
    "@types/react": "^18.2.74",
    "@types/react-dom": "^18.2.24",
    "graphology": "^0.25.4",
    "graphology-types": "^0.24.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "sigma": "^3.0.0-beta.16",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"

[sim51]

Thanks for the report.
Indeed, I can reproduce it.
But I give an empty setting to the sigma container it works ...

<SigmaContainer style={sigmaStyle} settings={{}}>

SHould be solved in v4.0.2