TypeScript: React-Sigma not rendering

[samuellye98]

I installed react-sigma using npm i --save react-sigma

But when importing react sigma using import { Sigma, RelativeSize, RandomizeNodePositions } from 'react-sigma', I received the following error on VSCode. The graph also does not render on my react-app. I'm using js so I don't know what's wrong with it.

Could not find a declaration file for module 'react-sigma'. '/frontend/node_modules/react-sigma/lib/index.js' implicitly has an 'any' type. Try npm install @types/react-sigma if it exists or add a new declaration (.d.ts) file containing declare module 'react-sigma';ts(7016)

Here is my package.json: { "name": "frontend", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "@types/sigmajs": "^1.0.27", "aphrodite": "^2.4.0", "bootstrap": "^4.5.0", "react": "^16.13.1", "react-bootstrap": "^1.0.1", "react-dom": "^16.13.1", "react-icons": "^3.10.0", "react-router-dom": "^5.2.0", "react-scripts": "3.4.1", "react-sigma": "^1.2.34", "sigma": "^2.0.0-alpha32" }, "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" ] }, "devDependencies": { "@babel/preset-react": "^7.9.4", "react-hot-loader": "^4.12.21", "webpack-cli": "^3.3.11" } }

[dunnock]

So that's type script, I don't have type script types implementation yet. There is suggestion on stackoverflow to set skipLibcheck to true in tsconfig.js: https://stackoverflow.com/questions/40262513/how-to-disable-suppress-errors-from-libraries-in-typescript

[samuellye98]

So that's type script, I don't have type script types implementation yet. There is suggestion on stackoverflow to set skipLibcheck to true in tsconfig.js: https://stackoverflow.com/questions/40262513/how-to-disable-suppress-errors-from-libraries-in-typescript

The thing is I'm using normal js and jsx files so it isn't typescript? Is there anyway to make the module recognize that it isn't typescript? Thanks again!

[dunnock]

It might be your local setup, but pretty sure comes from your environment as the error you copied comes from typescript:

Could not find a declaration file for module 'react-sigma'. '/frontend/node_modules/react-sigma/lib/index.js' implicitly has an 'any' type. Try npm install @types/react-sigma if it exists or add a new declaration (.d.ts) file containing declare module 'react-sigma';ts(7016)

[jamjar919]

If you want to quickly make this go away, just add a type file called react-sigma.d.ts with declare module "react-sigma" somewhere in your project. It doesn't have to be complete to stop the errors and you can update as needed. Here's mine:

declare module "react-sigma";

type SigmaGraph = {
    nodes: SigmaNode[],
    edges: SigmaEdge[]
}

type SigmaNode = {
    id: string;
    label: string;
    x?: number,
    y?: number,
    size?: number,
    color?: string
}

type SigmaEdge = {
    id: string;
    source: string;
    target: string;
    label?: string,
    color?: string;
}

[brianjychan]

@jamjar919 are you able to get the graph to render at all? I'm currently using your suggestion and the below but not seeing anything:

 <Sigma
        renderer="canvas"
        graph={graph}
        style={{ width: "800px", height: "400px" }}
        settings={{ defaultLabelSize: 15, drawEdges: true, clone: false }}
      >
        <RelativeSize initialSize={15} />
        <RandomizeNodePositions />
        <ForceAtlas2 worker barnesHutOptimize barnesHutTheta={0.6} iterationsPerRender={10} linLogMode timeout={3000} />
        <EdgeShapes default="tapered" />
        <NodeShapes default="star" />
      </Sigma>

[jamjar919]

@brianjychan I used my solution above in regards to the typing. Are you getting the same error? This was my final type file https://github.com/jamjar919/spotify-network-explore/blob/main/src/client/types/react-sigma.d.ts