Skip to content

User is expected to add global CSS for Sigma internals (this is undocumented) #1530

@latekvo

Description

@latekvo
  • Sigma.js version : 3.0.2
  • Graphology version : 0.26.0
  • @react-sigma/core: 5.0.6
  • Operating system: MacOS 15.5
  • Web browser: Chrome 142.0.7444.60

In a barebones React + Sigma.js app, the app crashes with the following error until the following global style is added:

The error:

Uncaught Error: Sigma: Container has no height. You can set the allowInvalidContainer setting to true to stop seeing this error.
    at Sigma.resize (sigma.esm.js:3194:1)
    at new Sigma (sigma.esm.js:1343:1)
    at SigmaContainer.tsx:96:1
    at Object.react_stack_bottom_frame (react-dom-client.development.js:25989:1)
    at runWithFiberInDEV (react-dom-client.development.js:870:1)
    at commitHookEffectListMount (react-dom-client.development.js:13244:1)
    at commitHookPassiveMountEffects (react-dom-client.development.js:13334:1)
    at reconnectPassiveEffects (react-dom-client.development.js:15832:1)
    at recursivelyTraverseReconnectPassiveEffects (react-dom-client.development.js:15784:1)
    at reconnectPassiveEffects (react-dom-client.development.js:15885:1)
Image

The global style:

.sigma-container {
  background: white;
  position: absolute;
  inset: 0;
}

Upon adding this style, everything works.
This behaviour is undocumented. The FAQ solution for this issue does not work until said style is added. (link)

Image

Live example: TBD (I'm working on it)

We recommend you to create a live example of your issue on CodeSandbox so we can reproduce it. You can start with this template: https://codesandbox.io/p/sandbox/sigma-template-82mpns

Steps to reproduce

  • Open official demo app (link)
  • Remove style for .sigma-container, which is not a user-class, but an internal class.
  • See the following error:
Image

Expected behavior

User should not be expected to set typing for internal library classes. This behaviour is undocumented.

Actual behavior

User has to set styles for sigma internals.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions