search

visjs / vis-network

:dizzy: Display dynamic, automatically organised, customizable network views.
https://visjs.github.io/vis-network/
Apache License 2.0
3.06k stars 373 forks source link

How to install in NPM, and have TypeScript compile not fail #930

Open Clay-Ferguson opened 4 years ago

Clay-Ferguson commented 4 years ago

I'm also a TypeScript developer trying to install with NPM:

npm install vis-network

when i try to compile it gave errors about vis-data not being found.

So then I installed it:

npm install vis-data

I'm trying to import like this:

import { Network, DataSet, Node, Edge, IdType } from 'vis-network/standalone';

but I just keep getting compile errors like this:

[INFO] ERROR in [at-loader] ./node_modules/vis-network/declarations/network/Network.d.ts:19:50 
[INFO]     TS2307: Cannot find module 'vis-data' or its corresponding type declarations.
[INFO] 
[INFO] ERROR in [at-loader] ./node_modules/vis-network/declarations/entry-standalone.d.ts:2:23 
[INFO]     TS2307: Cannot find module 'vis-data/esnext' or its corresponding type declarations.
[INFO] 
[INFO] ERROR in [at-loader] ./node_modules/vis-network/declarations/entry-standalone.d.ts:4:42 
[INFO]     TS2307: Cannot find module 'vis-data/esnext' or its corresponding type declarations.

anyone ever figured out how to get TypeScript actually working ?

Clay-Ferguson commented 4 years ago

Update: I found this, thinking it might help: https://github.com/visjs/vis-network/blob/master/examples/network/basicUsage.html

but it references this:

and I can't find that file at all. I have no problem importing this way instead of via NPM, if I can find a bundled file that is complete. Not sure if people are expected to actually download the source and get it to build? ...before this file will exist?

Thomaash commented 4 years ago

../../standalone/umd/vis-network.min.js

This is just the path from the example to the file within Vis Network directory.

Could you provide an MWE on StackBlitz or something similar, please? I can't replicate your issue.

Thanks.

Thomaash commented 4 years ago

I don't know, it just seems to work: https://stackblitz.com/edit/typescript-ootnzf.

Clay-Ferguson commented 4 years ago

Thanks, I see the example working with these:

    "@egjs/hammerjs": "^2.0.17",
    "component-emitter": "^1.3.0",
    "keycharm": "^0.3.1",
    "timsort": "^0.3.0",
    "uuid": "^8.3.0",
    "vis-data": "^7.0.0",
    "vis-network": "^8.0.1",
    "vis-util": "^4.3.4"

Your readme.md just says vis-network is the thing to install. Not sure how you got the rest of those installed, but I think this answers my question. thanks.

Thomaash commented 4 years ago

These are not always necessary (for JS you need only Vis Network and nothing more), they are however needed for TS (JS is but declarations are not bundled) or ESNext builds. If you read npm install vis-network output it will actually tell you about these.

strican commented 4 years ago

Shouldn't installing the package install all the dependencies automatically? Is there a way to tell these are needed and have npm handle the rest?

Thomaash commented 4 years ago

Hi @strican,

they are peer dependencies (otherwise there would be issues with using Network + Timeline + Graph3D at the same page). You have to install peer dependencies manually, npm used to install them automatically but they don't anymore.

However I'm more and more inclined towards reworking the package format once more (this one isn't even a year old) because, although it does everything it should do, many people are confused by it.

RamiDhouib commented 4 years ago

first thanks for creating this package . but you should do a guide on how to set up all vis packages .Your documentation is very lacking .You could have just made a guide on how to mak vis-network work on Angular ,cause not everyone knows about peer dependencies and somestuff like "@ViewChild('network') el: ElementRef; " is very confusing at the start. You knowing stuff doesn't mean we do. All famous/most used libraries are well documented so that they are made easy for everyone. the code you giving is just how to use after setting stuff up .If w can"t set it up or waste days just figuring out how to make a library work , no one will use it even if it is well constructed.

tillias commented 4 years ago

@RamiDhouib I have created tutorial for TS Developers with detailed description here: https://tillias.wordpress.com/2020/10/11/visualize-graph-data-using-vis-network-and-angular

In fact this is one of the best libraries you can get for free out there, but documentation sometimes sucks.

RamiDhouib commented 4 years ago

I also after somwtime made it work.. It lacks documentation but it's easy to use(after setting up packages). Good job on the tutorial.

On Sun, 25 Oct 2020, 20:18 tillias, notifications@github.com wrote:

@RamiDhouib https://github.com/RamiDhouib I have created tutorial for TS Developers with detailed description here: https://tillias.wordpress.com/2020/10/11/visualize-graph-data-using-vis-network-and-angular

In fact this is one of the best libraries you can get for free out there, but documentation sometimes sucks.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/visjs/vis-network/issues/930#issuecomment-716197519, or unsubscribe https://github.com/notifications/unsubscribe-auth/ARAIGSS4WFZ2YZL2M7XP7B3SMR2ZZANCNFSM4PYW2F3A .

laike9m commented 3 years ago

Does vis-network officially support ts now?

abhinandhanreddyk commented 1 year ago

I Installed all dependencies still facing error while building, I have tried @tillias blog, couldn't resolve . Can some help me how to import vis-network and compile without error

├── typescript@4.8.4 ├── vis-data@7.1.4 ├── vis-network@9.1.2 ├── vis-util@5.0.3 └── zone.js@0.11.8

Error: node_modules/vis-data/declarations/data-interface.d.ts:62:23 - error TS2344: Type 'Item' does not satisfy the constraint 'Partial<Record<IdProp, OptId>>'. 62 oldData: FullItem<Item, IdProp>[]; node_modules/vis-data/declarations/data-interface.d.ts:58:37 58 export interface UpdateEventPayload<Item, IdProp extends string> { This type parameter might need an extends Partial<Record<IdProp, OptId>> constraint. Error: node_modules/vis-data/declarations/data-interface.d.ts:68:20 - error TS2344: Type 'Item' does not satisfy the constraint 'Partial<Record<IdProp, OptId>>'. 68 data: FullItem<Item, IdProp>[]; node_modules/vis-data/declarations/data-interface.d.ts:58:37 58 export interface UpdateEventPayload<Item, IdProp extends string> { This type parameter might need an extends Partial<Record<IdProp, OptId>> constraint.

abhinandhanreddyk commented 1 year ago

I Installed all dependencies still facing error while building, I have tried @tillias blog, couldn't resolve . Can some help me how to import vis-network and compile without error

├── typescript@4.8.4 ├── vis-data@7.1.4 ├── vis-network@9.1.2 ├── vis-util@5.0.3 └── zone.js@0.11.8

Error: node_modules/vis-data/declarations/data-interface.d.ts:62:23 - error TS2344: Type 'Item' does not satisfy the constraint 'Partial<Record<IdProp, OptId>>'. 62 oldData: FullItem<Item, IdProp>[]; node_modules/vis-data/declarations/data-interface.d.ts:58:37 58 export interface UpdateEventPayload<Item, IdProp extends string> { This type parameter might need an extends Partial<Record<IdProp, OptId>> constraint. Error: node_modules/vis-data/declarations/data-interface.d.ts:68:20 - error TS2344: Type 'Item' does not satisfy the constraint 'Partial<Record<IdProp, OptId>>'. 68 data: FullItem<Item, IdProp>[]; node_modules/vis-data/declarations/data-interface.d.ts:58:37 58 export interface UpdateEventPayload<Item, IdProp extends string> { This type parameter might need an extends Partial<Record<IdProp, OptId>> constraint.

Open Issue in vis-datahttps://github.com/visjs/vis-data/issues/985

Sciumo commented 1 year ago

1) Make sure you didn't install @types/vis 2) Follow the example above, do not use the outdated hammerjs or @types/hammerjs npm install vis-network npm install @egjs/hammerjs npm install keycharm npm install vis-data npm install vis-util 3) Import from "peer" Why? who knows import { DataSet } from 'vis-data/peer'; import { Network } from 'vis-network/peer';

I was able to build after all this. -------Update----- Similar TS issues with visjs for a few years now. I don't think the devs use TS so unless the community adds TS support, the issues are likely to remain. "vis": "^4.21.0-EOL", "vis-data": "^7.1.6", "vis-network": "^9.1.6", "vis-timeline": "^7.7.2", "vis-utils": "^0.2.1" $ tsc && vite build ../../node_modules/vis-data/declarations/data-interface.d.ts:1:28 - error TS2307: Cannot find module 'vis-util/esnext' or its corresponding type declarations.

1 import { Assignable } from "vis-util/esnext";


../../node_modules/vis-data/declarations/entry-esnext.d.ts:3:24 - error TS2307: Cannot find module 'vis-util/esnext' or its corresponding type declarations.

3 export { DELETE } from "vis-util/esnext";

../../node_modules/vis-network/declarations/index-legacy.d.ts:14:23 - error TS2307: Cannot find module 'vis-util/esnext' or its corresponding type declarations.

14 import * as util from "vis-util/esnext";


../../node_modules/vis-network/declarations/index-legacy.d.ts:19:24 - error TS2307: Cannot find module 'vis-util/esnext' or its corresponding type declarations.

19 import { Hammer } from "vis-util/esnext";

../../node_modules/vis-network/declarations/network/options.d.ts:1:75 - error TS2307: Cannot find module 'vis-util/esnext' or its corresponding type declarations.

1 import { ConfiguratorConfig, ConfiguratorHideOption, OptionsConfig } from "vis-util/esnext";


Found 5 errors in 4 files.

Errors  Files
     1  ../../node_modules/vis-data/declarations/data-interface.d.ts:1
     1  ../../node_modules/vis-data/declarations/entry-esnext.d.ts:3
     2  ../../node_modules/vis-network/declarations/index-legacy.d.ts:14
     1  ../../node_modules/vis-network/declarations/network/options.d.ts:1