1

I installed react-vis library for my react code.
I used this command, like in the tutorial: npm install react-vis --save
But when I include the library with this code: import {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries} from 'react-vis';
It gives me the following error:

Could not find a declaration file for module 'react-vis'. 'C:/react-vis/dist/index.js' implicitly has an 'any' type.
Try npm install @types/react-vis if it exists or add a new declaration (.d.ts) file containing declare module 'react-vis';
And even that doesn't work. Anyone know how to do this?
I'm just a beginner in react.

3 Answers3

4

A declaration file was created by evgsil; you can get the declaration file he created in his repo at https://github.com/evgsil/react-vis-typings. It is the react-vis.d.ts file. To use it, you can copy the file to a local folder and then reference it from the file that imports react-vis. To reference it, you may add

/// <reference path="./react-vis.d.ts"/>

to the top of the file that imports it. The value assigned to the reference path should be the relative path to wherever you saved the d.ts file.

So a file with react-vis imported may look like this:

/// <reference path="../../../dts/react-vis.d.ts"/>
import React from 'react';
import "react-vis/dist/style.css";
import {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries} from 'react-vis';

export function FirstPlot() {
    return(
        <XYPlot
            width={300}
            height={300}>
            <HorizontalGridLines />
            <LineSeries
                data={[
                {x: 1, y: 10},
                {x: 2, y: 5},
                {x: 3, y: 15}
                ]}/>
        <XAxis />
            <YAxis />
        </XYPlot>
    )
}

Hopefully an @types solution will be forthcoming soon, but until then this has worked for me.

P.S. If you are wondering what that /// <reference path /> is all about, you can read the specific documentation about it here. In typescript, it is called a "triple-slash directive."

meisterpeeps
  • 86
  • 2
  • 7
1

I created a demo in this sandbox here: https://codesandbox.io/s/64k21qmq43

make sure you have the latest version of react-vis (1.11.2)

Package.json

"dependencies": {
    "react-vis": "1.11.2"
  },

Maybe remove all your node modules and run npm install again with your new updated package.json. Usually the error you describe come with your modules acting weird... So thats why i suggest to re-install them ;)

then your component will work fine like this:

import React from "react";
import ReactDOM from "react-dom";

import {
  XYPlot,
  XAxis,
  YAxis,
  HorizontalGridLines,
  LineSeries
} from "react-vis";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <XYPlot width={300} height={300}>
        <HorizontalGridLines />
        <LineSeries data={[{ x: 1, y: 10 }, { x: 2, y: 5 }, { x: 3, y: 15 }]} />
        <XAxis />
        <YAxis />
      </XYPlot>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

If you follow my sandbox example you should be fine!, good Luck!

Stephan Hovius
  • 391
  • 1
  • 6
1

I believe you are using typescript for compiling your code. First try npm install @types/react-vis.
If it does not work then you have to take longer route:
- Create a folder name : typings in the root of your project,
- inside typings create a new folder with name: "react-vis" and in that folder create a react-vis.d.ts file
- write declare module 'react-vis' in react-vis.d.ts file.

// react-vis.d.ts
 declare module 'react-vis';</br>

- go to your tsconfig.json file and add "typeRoots": [ "../../typings", "../../node_modules/@types"] in the compilerOptions (with the proper relative path to your folders) to let TypeScript know where it can find the types definitions of your libraries and modules and add a new property
- add exclude": ["../../node_modules", "../../typings"] " to the tsconfig.json file. Here is an example of how your tsconfig.json file should look like:

{
"compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": true,
    "sourceMap": true,
    "outDir": "../dst/",
    "target": "ESNEXT",
    "typeRoots": [
        "../../typings",
        "../../node_modules/@types"
    ]
},
"lib": [
        "es2016"
],
"exclude": [
    "../../node_modules",
    "../../typings"
]

}
For more information, do refer to : https://stackoverflow.com/a/51320328/4998546

Devender Verma
  • 94
  • 5