Recharts 不适用于 React with typescript
Recharts is not working for the React with typescript
我在处理图表库时遇到问题。
循序渐进
- 创建一个空项目
$ npx create-react-app chart-demo --template typescript
- 添加 Recharts
$ yarn add @types/recharts
- 运行项目
$ 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"
]
}
}
您没有安装 recharts,您只安装了它的类型定义。
尝试:
yarn install recharts
当您安装 @types/<package-name>
包时,您没有安装任何可运行的代码。您只是为不提供自己类型的包安装类型定义。您仍然需要安装包本身。
也有可能您安装的是 rechart
而不是 recharts
。确保安装正确的包 (recharts
)。
2021 年 3 月 - 类似问题:
错误:
error An unexpected error occurred: "ENOENT: no such file or directory,
_
copyfile
_
'C:\Users\myUserName\AppData\Local\Yarn\Cache\v6\npm-recharts-scale-0.4.4-8d6d1fce49cb617ee047601c6b261f3e5ca7f2c7-integrity\node_modules\recharts-scale\umd\RechartsScale.min.js\main.js'
->
'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
修复:
删除文件(或者,重命名为不同的文件名)
\node_modules\recharts-scale\umd\RechartsScale.js
\node_modules\recharts-scale\umd\RechartsScale.min.js
运行 yarn
我在处理图表库时遇到问题。
循序渐进
- 创建一个空项目
$ npx create-react-app chart-demo --template typescript
- 添加 Recharts
$ yarn add @types/recharts
- 运行项目
$ 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"
]
}
}
您没有安装 recharts,您只安装了它的类型定义。
尝试:
yarn install recharts
当您安装 @types/<package-name>
包时,您没有安装任何可运行的代码。您只是为不提供自己类型的包安装类型定义。您仍然需要安装包本身。
也有可能您安装的是 rechart
而不是 recharts
。确保安装正确的包 (recharts
)。
2021 年 3 月 - 类似问题:
错误:
error An unexpected error occurred: "ENOENT: no such file or directory,
_
copyfile
_
'C:\Users\myUserName\AppData\Local\Yarn\Cache\v6\npm-recharts-scale-0.4.4-8d6d1fce49cb617ee047601c6b261f3e5ca7f2c7-integrity\node_modules\recharts-scale\umd\RechartsScale.min.js\main.js'
->
'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
修复:
删除文件(或者,重命名为不同的文件名)
\node_modules\recharts-scale\umd\RechartsScale.js
\node_modules\recharts-scale\umd\RechartsScale.min.js
运行
yarn