Possible Typescript incompatibilities?

[ronnyek]

I created a new react app using create-react-app with template of typescript type.

Just tinkering around, I'm trying to just get A diagram up and rendering within this react app, and following code examples, I'm running into a lot of what appears to be incompatibilities.

C:/source/react-app1/src/SampleDiagram.tsx
TypeScript error in C:/source/react-app1/src/SampleDiagram.tsx(38,28):
Type 'DefaultLinkModel' does not satisfy the constraint 'LinkModel<LinkModelGenerics>'.
  Types of property 'deserialize' are incompatible.
    Type '(event: import("C:/source/react-app1/node_modules/@projectstorm/react-canvas-core/dist/@types/src/core-models/BaseEntity").DeserializeEvent<import("C:/source/react-app1/node_modules/@projectstorm/react-diagrams-defaults/dist/@types/link/DefaultLinkModel").DefaultLinkModel>) => void' is not assignable to
type '(event: import("C:/source/react-app1/node_modules/@projectstorm/react-diagrams-core/node_modules/@projectstorm/react-canvas-core/dist/@types/core-models/BaseEntity").DeserializeEvent<import("C:/source/react-app1/node_modules/@projectstorm/react-diagrams-defaults/dist/@types/link/DefaultLinkModel").DefaultLin
kModel>)...'.
      Types of parameters 'event' and 'event' are incompatible.
        Type 'import("C:/source/react-app1/node_modules/@projectstorm/react-diagrams-core/node_modules/@projectstorm/react-canvas-core/dist/@types/core-models/BaseEntity").DeserializeEvent<import("C:/source/react-app1/node_modules/@projectstorm/react-diagrams-defaults/dist/@types/link/DefaultLinkModel").DefaultLin
kModel>' is not assignable to type 'import("C:/source/react-app1/node_modules/@projectstorm/react-canvas-core/dist/@types/src/core-models/BaseEntity").DeserializeEvent<import("C:/source/react-app1/node_modules/@projectstorm/react-diagrams-defaults/dist/@types/link/DefaultLinkModel").DefaultLinkModel>'.
          Types of property 'engine' are incompatible.
            Type 'import("C:/source/react-app1/node_modules/@projectstorm/react-diagrams-core/node_modules/@projectstorm/react-canvas-core/dist/@types/CanvasEngine").CanvasEngine<import("C:/source/react-app1/node_modules/@projectstorm/react-diagrams-core/node_modules/@projectstorm/react-canvas-core/dist/@types/Can
vasEngine").CanvasEn...' is not assignable to type 'import("C:/source/react-app1/node_modules/@projectstorm/react-canvas-core/dist/@types/src/CanvasEngine").CanvasEngine<import("C:/source/react-app1/node_modules/@projectstorm/react-canvas-core/dist/@types/src/CanvasEngine").CanvasEngineListener, import("C:/source/
react-app1/node_modules/@projectstorm/react-canvas-cor...'.
              Property 'model' is protected but type 'CanvasEngine<L, M>' is not a class derived from 'CanvasEngine<L, M>'.  TS2344

    36 | 
    37 |     // link the ports
  > 38 |     let link1 = port1.link<DefaultLinkModel>(port2);
       |                            ^
    39 |     link1.getOptions().testName = 'Test';
    40 |     link1.addLabel('Hello World!');
    41 | 

Thinking maybe other examples I would have better luck with, I attempted those, and they all seemed to be complaining about similar things.

I'm not sure if there is specific typescript config I need to be setting in tsconfig.json to get this to work properly, or if maybe there is an incompatibility with whatever version create-react-app installed (~3.7.2), but manually downgrading to ^3.5.2 or whatever the library itself uses, didnt seem to resolve the problem for me either.

[NicolasGiaco]

Hi @ronnyek I'm using the library with typescript and I don't have any kind of problem

I'm using react with typescript, idk if using Angular is a problem, I'll still leave you my configuration files if it'll help.

My tsconfig is as following:

{
  "compilerOptions": {
    "baseUrl": "src",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    // * Must had strict null checks to false because our brick return PortModel | null
    // * And library accepts only PortModel
    "strictNullChecks": false,
    "jsx": "react"
  },
  "include": ["src"]
}

And here is my package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/core": "^10.0.27",
    "@emotion/styled": "^10.0.27",
    "@fortawesome/fontawesome-pro": "^5.12.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.27",
    "@fortawesome/pro-regular-svg-icons": "^5.12.1",
    "@fortawesome/pro-solid-svg-icons": "^5.12.1",
    "@fortawesome/react-fontawesome": "^0.1.8",
    "@projectstorm/react-diagrams": "^6.0.2",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/lodash": "^4.14.149",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/react-router-dom": "^5.1.3",
    "axios": "^0.19.2",
    "axios-cache-adapter": "^2.5.0",
    "closest": "^0.0.1",
    "dagre": "^0.8.5",
    "i18next": "^19.3.2",
    "localforage": "^1.7.3",
    "lodash": "^4.17.15",
    "mathjs": "^6.6.0",
    "pathfinding": "^0.4.18",
    "paths-js": "^0.4.10",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-i18next": "^11.3.3",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0",
    "react-use": "^13.26.3",
    "resize-observer-polyfill": "^1.5.1",
    "typescript": "~3.7.2"
  },
  "devDependencies": {
    "@welldone-software/why-did-you-render": "^4.0.5",
    "cypress": "^4.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "cypress": "cypress open"
  },
  "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"
    ]
  }
}

[ronnyek]

whoops, I mentioned angular, but this was not at all angular, my apologies. Just a basic create-react-app

[DannyHinshaw]

@ronnyek I got this as well, mine was a little different:

/web-client/node_modules/@projectstorm/react-canvas-core/dist/@types/CanvasEngine.d.ts
TypeScript error in /web-client/node_modules/@projectstorm/react-canvas-core/dist/@types/CanvasEngine.d.ts(12,5):
Property 'canvasReady' of type '(() => void) | undefined' is not assignable to string index type '(event: BaseEvent) => any'.  TS2411

    10 | import { StateMachine } from './core-state/StateMachine';
    11 | export interface CanvasEngineListener extends BaseListener {
  > 12 |     canvasReady?(): void;
       |     ^
    13 |     repaintCanvas?(): void;
    14 |     rendered?(): void;
    15 | }

The only way I was able to move on and get to the next issue was changing this in ts-config.json under compilerOptions:

...
    "skipLibCheck": false
...

I will not say this is a solution, but it is at least a way to move on and keep working.