Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Canvas showing completely white

See original GitHub issue

I am using a basic CreateReactApp installation, added all the dependencies including the support for typescript, the code doesn’t generate any error, but the canvas is completely white. In the developer console it seems that something is created but I am not able to do anything.

This is the component .tsx

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

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

// 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);

const model = new DiagramModel();
model.addAll(node1, node2, link);
engine.setModel(model);

export default class DiGraph extends React.Component{
    render(){
        return (
            <CanvasWidget className="diagram-container" engine={engine}/>
            );
    };
}

And this is my package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/core": "^10.0.28",
    "@emotion/styled": "^10.0.27",
    "@projectstorm/react-diagrams": "^6.0.1-beta.7",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^25.1.4",
    "@types/node": "^12.12.31",
    "@types/react": "^16.9.25",
    "@types/react-dom": "^16.9.5",
    "closest": "^0.0.1",
    "dagre": "^0.8.5",
    "lodash": "^4.17.15",
    "mathjs": "^6.6.1",
    "pathfinding": "^0.4.18",
    "paths-js": "^0.4.10",
    "react": "^16.13.1",
    "react-digraph": "^6.6.4",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "resize-observer-polyfill": "^1.5.1",
    "typescript": "^3.8.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

And the tsconfig.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/core": "^10.0.28",
    "@emotion/styled": "^10.0.27",
    "@projectstorm/react-diagrams": "^6.0.1-beta.7",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^25.1.4",
    "@types/node": "^12.12.31",
    "@types/react": "^16.9.25",
    "@types/react-dom": "^16.9.5",
    "closest": "^0.0.1",
    "dagre": "^0.8.5",
    "lodash": "^4.17.15",
    "mathjs": "^6.6.1",
    "pathfinding": "^0.4.18",
    "paths-js": "^0.4.10",
    "react": "^16.13.1",
    "react-digraph": "^6.6.4",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "resize-observer-polyfill": "^1.5.1",
    "typescript": "^3.8.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Something is there for sure and this is driving me nuts! 2020-03-25 22_17_39-React App