Blank white screen while running getting started instructions in docs

[AmoghDoijode]

Hello,

I am following the getting started instructions from "https://projectstorm.gitbook.io/react-diagrams/getting-started/using-the-library". All i see a blank white screen. Please let me know what i am doing wrong.

import React from 'react';
import './App.css';
import createEngine, {
  DefaultLinkModel,
  DefaultNodeModel,
  DiagramModel
} from '@projectstorm/react-diagrams';

import {
  CanvasWidget
} from '@projectstorm/react-canvas-core';

function App() {
  // create an instance of the engine with all the defaults
  const engine = createEngine();

// node 1
  const node1 = new DefaultNodeModel({
    name: 'Node 1',
    color: 'rgb(0,192,255)',
  });
  node1.setPosition(100, 100);
  let port1 = node1.addOutPort('Out');

// node 2
  const node2 = new DefaultNodeModel({
    name: 'Node 1',
    color: 'rgb(0,192,255)',
  });
  node2.setPosition(100, 100);
  let port2 = node2.addOutPort('Out');

// link them and add a label to the link
  const link = port1.link<DefaultLinkModel>(port2);
// link.addLabel('Hello World!');

  const model = new DiagramModel();

  model.addAll(node1, node2, link);
  engine.setModel(model);

  return (
      <CanvasWidget engine={engine} />
  );
}

export default App;

Browser: Chrome "@projectstorm/react-diagrams": "6.0.1" "@emotion/core": "10.1.1", "@emotion/styled": "10.0.3",

[danlobo]

Possibly related with #773

Check if canvas is missing a height value. If it's the case, one possible solution is what bastienJS commented in his post.

[astraujums]

I had the same effect once when the HTML element ID that the index.tsx was using to set up renderer was different from the actual ID of the div element in the index.html. Nothing to do with React Diagrams in that case, obviously! :) E.g.: ReactDOM.render(<MyReactDiagramsWidget engine={engine} />, document.getElementById('root')); vs. <div id="application"></div>