图表不适用于带有打字稿

时间:2020-09-30 19:07:43

标签: reactjs typescript recharts victory-charts react-starter-kit

我在处理图表库时遇到问题。

一步一步

  1. 创建一个空项目

$ npx create-react-app chart-demo --template typescript

  1. 添加图表

$ yarn add @types/recharts

  1. 运行项目

$ yarn start

它显示以下错误。

Failed to compile
./src/App.tsx
Module not found: Can't resolve 'recharts' in '\chart-demo\src'

仅供参考,它不仅适用于图表,还适用于多个库。幸运的是,我发现victory chart在工作

这真的是一个新项目,仅添加了recharts
请帮助我解决这个问题。

Package.json

{
  "name": "chart-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/recharts": "^1.8.15",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3",
    "typescript": "~3.7.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

3 个答案:

答案 0 :(得分:5)

您没有安装图表,仅安装了其类型定义。

尝试:

yarn install recharts

在安装@types/<package-name>软件包时,您没有安装任何可运行的代码。您只是为不提供其自身类型的包安装类型定义。您仍然需要自己安装软件包。

答案 1 :(得分:1)

您也可能安装了 rechart 而不是 recharts。确保安装正确的软件包 (recharts)。

答案 2 :(得分:0)

2021 年 3 月 - 类似问题:

错误:

<块引用>

error 发生意外错误:“ENOENT:没有这样的文件或目录,
_
复制文件
_
'C:\Users\myUserName\AppData\Local\Yarn\Cache\v6\npm-recharts-scale-0.4.4-8d6d1fce49cb617ee047601c6b261f3e5ca7f2c7-integrity\node_modules\recharts\recharts-scale\Scalemin.Scalemind
->
'C:\code\KF\mono-repo\kfadvance-frontend-dev\node_modules\recharts-scale\umd\RechartsScale.min.js\main.js'”。

原因:

之前的两个路径是文件。
但现在,它们是目录。

\node_modules\recharts-scale\umd\RechartsScale.js
\node_modules\recharts-scale\umd\RechartsScale.min.js

修正:

  1. 删除文件(或重命名为不同的文件名)

    \node_modules\recharts-scale\umd\RechartsScale.js
    \node_modules\recharts-scale\umd\RechartsScale.min.js

  2. 运行yarn