How to use Sigma.js in React with Typescript

0
votes

I'm trying to set up a simple web app with React/TypeScript so I can fiddle with some graphs with Sigma.js. But I can't get the end result to render anything with Sigma.

Here's the steps I followed:

$ npx create-react-app sigmafiddle --template typescript^C
$ cd sigmafiddle
$ yarn add sigma
$ yarn add @types/sigmajs

However, when I go to import Sigma I encounter the following problems:

import { sigma } from 'sigma'

Fails with this error message:

TypeScript error in ~/devel/sigmafiddle/src/App.tsx(4,23): Could not find a declaration file for module 'sigma'. '~/devel/sigmafiddle/node_modules/sigma/endpoint.js' implicitly has an 'any' type. Try npm install @types/sigma if it exists or add a new declaration (.d.ts) file containing declare module 'sigma'; TS7016 Not a real helpful message, since @types/sigma does not exist within npm.

And if I try this:

import { sigma } from 'sigmajs'

I get this failure:

TypeScript error in ~/devel/sigmafiddle/src/App.tsx(4,23): File '~/devel/sigmafiddle/node_modules/@types/sigmajs/index.d.ts' is not a module. TS2306

I've also tried the package react-sigma:

yarn add react-sigma

// in app.tsx
import {Sigma, RandomizeNodePositions, RelativeSize} from 'react-sigma';

Unfortunately there is no @types/react-sigma package, so this results in the following error:

Cannot find module 'react-sigma'

How can I get sigma.js to work with TypeScript and React?

1
reactjstypescriptnpmimportsigma.js

1 Answers

1
votes

You didn't import what you are trying to use

replace

/// <reference types="@types/sigmajs" />

to

import { sigma } from 'sigma';

Usually, import as above is the common way to use lib in js/ts project.

Update

Since the error seems to be lacking type definition of the lib,

File '~/devel/graph-grammar/node_modules/@types/sigmajs/index.d.ts' is not a module.

npm install --save @types/sigmajs

And import as normal may work.

import { sigma } from 'sigma';

Refer to @types/sigmajs

Update No.2

You may need react-sigma npm, repo in your react project instead.

Install it, and import refer to the document seems fine.

import {Sigma, RandomizeNodePositions, RelativeSize} from 'react-sigma';

If that not work, try to install both sigma and react-sigma, since ploty.js need both ploty.js and react-ploty.js been installed, I guess you may meet the similar situation.

Update No.3

Seems react-sigma don't support typescript, they support flow-type instead.

Edit elegant-banzai-22gbb

Refer: document of react-sigma