reactjs - React 找不到模块“react-vis”的声明文件

Question

我为我的反应代码安装了 react-vis 库。
我使用了这个命令，就像在教程中一样：npm install react-vis --save
但是当我用这个代码包含库时：import {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries} from 'react-vis';
它给了我以下错误：

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';
即使这样也行不通。有人知道怎么做吗？
我只是反应的初学者。

score 4 · Accepted Answer

evgsil 创建了一个声明文件；你可以在https://github.com/evgsil/react-vis-typings获得他在他的 repo 中创建的声明文件。它是 react-vis.d.ts 文件。要使用它，您可以将文件复制到本地文件夹，然后从导入 react-vis 的文件中引用它。要引用它，您可以添加

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

到导入它的文件的顶部。分配给参考路径的值应该是您保存 d.ts 文件的位置的相对路径。

所以导入了 react-vis 的文件可能如下所示：

/// <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>
    )
}

希望@types 解决方案很快就会出现，但在那之前这对我有用。

PS 如果您想知道这是怎么回事，您可以在此处/// <reference path />阅读有关它的特定文档。在打字稿中，它被称为“三斜杠指令”。

score 1 · Accepted Answer

我在此沙箱中创建了一个演示： https ://codesandbox.io/s/64k21qmq43

确保您拥有最新版本的 react-vis (1.11.2)

包.json

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

也许删除所有节点模块并使用新更新的 package.json 再次运行 npm install。通常你描述的错误伴随着你的模块表现得很奇怪......所以这就是我建议重新安装它们的原因;）

那么您的组件将像这样正常工作：

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);

如果您按照我的沙盒示例进行操作，您应该没问题！祝您好运！

score 1 · Accepted Answer

我相信您正在使用打字稿来编译您的代码。第一次尝试 npm install @types/react-vis。
如果它不起作用，那么你必须采取更长的路线：
- 创建一个文件夹名称：在项目的根目录中键入，- 在类型内部创建一个名称为“ react-vis”的新文件夹，并在该文件夹中创建一个react- vis.d.ts文件 - 写入react-vis.d.ts 文件。

declare module 'react-vis'

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

- 转到您的tsconfig.json文件并添加"typeRoots": [ "../../typings", "../../node_modules/@types"]compilerOptions（使用正确的文件夹相对路径），让 TypeScript 知道它可以在哪里找到库和模块的类型定义并添加新属性
- 添加exclude": ["../../node_modules", "../../typings"]“到 tsconfig .json 文件。下面是 tsconfig.json 文件的示例：

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

更多信息，请参考：https : //stackoverflow.com/a/51320328/4998546

reactjs - React 找不到模块“react-vis”的声明文件

3 回答 3

Related

Reference