Recharts不适用于带有打字脚本的React

Question

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

逐步

1. 创建一个空项目

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

2. 添加Recharts

$ yarn add @types/recharts

3. 运行项目

$ yarn start

它显示以下错误。

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

仅供参考，它不仅用于再研究，还用于几个图书馆。幸运的是，我发现胜利图表正在运行

这是一个全新的项目，只添加了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"
]
}
}

Answer 1

您没有安装recharts，只安装了它的类型定义。

尝试：

yarn install recharts

---

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

Answer 2

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

Answer 3

2021年3月-类似问题：

错误：

error发生意外错误："ENOENT:没有这样的文件或目录，
_
copyfile
_
'C:\Users\myUserName\AppData\Local\Yarn\Cache\v6\npm-recharts-sccale0.4.4-8d6d1fce49cb617ee047601c6b261f3e5ca7f2c7-integrity\node_modules/recharts-scaleumd\RechartsScale.min.js\main.js'
->
'C:\code\KF\mono-repo\kforward front-end dev\node_modules\recharts scale\umd\RechartsScale.min.js\main.js'"。

原因：

下面两个路径是以前的文件
但现在，它们是目录。

node_modulesrecharts-scaleumdRechartsScale.js
node_modulesrecharts-scaleumdRechartsScale.min.js

修复：

1. 删除文件(或重命名为其他文件名(

   node_modulesrecharts-scaleumdRechartsScale.js
node_modulesrecharts-scaleumdRechartsScale.min.js

2. 运行yarn