Recharts is not working for the React with typescript

Viewed 8305

I have an issue with handling chart libraries.

Step by step

  1. Create an empty project

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

  1. Add Recharts

$ yarn add @types/recharts

  1. 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"
    ]
  }
}

3 Answers

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.

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

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

Related