Recharts is not working for the React with typescript

Question

I have an issue with handling chart libraries.

Step by step

1. Create an empty project

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

2. Add Recharts

$ yarn add @types/recharts

3. Run the project

$ yarn start

It shows the following error.

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

FYI, it's not only for recharts but for several libraries. Fortunately, I found victory chart is working

It's really fresh a new project, just added recharts only.
Please help me to figure out this issue.

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

You didn't install recharts, you only installed its type definitions.

Try:

yarn install recharts

---

When you install a @types/<package-name> package, you aren't installing any runnable code. You are just installing the type definitions for a package that doesn't provide it's own types. You still need to install the package itself.

Answer 2

It's also possible that you've installed rechart instead of recharts . make sure you install the correct package ( recharts ).

Answer 3

Mar 2021 - Similar issue:

Error:

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'".

Reason:

Below two paths were files, previously.
But now, they are directories.

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

Fix:

1. Delete the files (or, rename to a different file name)

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

2. Run yarn