Module not found: Can't resolve 'vis-network/dist/types/vis-types' in '/home/jamie/programs/vis-test/src'

[jamietwells]

Hi, I seem to be unable to use the DataSet.

Steps to reproduce:

Run the commands:

yarn create react-app vis-test --typescript
cd vis-test
yarn add vis-data
yarn add vis-network

Replace the src/App.tsx file with the following:

import React from 'react';
import './App.css';
import { Network } from 'vis-network';
import { DataSet } from 'vis-network/dist/types/vis-types';

class App extends React.Component<{}, { networkElement?: HTMLDivElement }> {
  constructor(props: {}) {
    super(props);
    this.state = {};
  }

  render() {
    const instance = this;

    if (instance.state.networkElement) {
      const nodes = new DataSet([{ id: 'a' }, { id: 'b' }]);
      const edges =  new DataSet([{ from: 'a', to: 'b' }]);
      const data = { nodes, edges };
      new Network(instance.state.networkElement, data);
    }

    function refCallback(elem: HTMLDivElement | null) {
      if (elem && !instance.state.networkElement)
        instance.setState({ networkElement: elem });
    }

    return (
      <div className="App">
        <div ref={refCallback} ></div>
      </div>
    );
  }
}

export default App;

run the command:

yarn start

See runtime error:

Failed to compile.

./src/App.tsx
Module not found: Can't resolve 'vis-network/dist/types/vis-types' in '/home/jamie/programs/vis-test/src'

[micahstubbs]

thanks for reporting this @jamietwells, as well as the steps to reproduce.

That said, we don't current ship TypeScript types for visjs-network. You might have luck making a custom module declaration for visjs-network in your project, and then dropping in these generated types https://github.com/visjs-community/visjs-network/issues/52#issuecomment-511128577

Like you see in #52, we're thinking about implementing more robust support for TypeScript. If that is something that you are interested in, we welcome contributions 😄