Error trying using recharts in typescript project

2
votes

Hi i have installed recharts and @types/recharts in my project. Now when i try to import any chart to a component i have this error:

Failed to compile.

/Users/rmanreza/Projects/portfolio/node_modules/recharts/types/cartesian/YAxis.d.ts TypeScript error in /Users/rmanreza/Projects/portfolio/node_modules/recharts/types/cartesian/YAxis.d.ts(1,13): '=' expected. TS1005

1 | import type { FunctionComponent, SVGProps } from 'react'; | ^ 2 | import { BaseAxisProps, AxisInterval } from '../util/types'; 3 | interface YAxisProps extends BaseAxisProps { 4 | yAxisId?: string | number;

This is how package.json look like:

*

{ "name": "portfolio", "version": "0.1.0", "private": true, "dependencies": { "@fortawesome/fontawesome-svg-core": "^1.2.30", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "@types/recharts": "^1.8.19", "axios": "^0.21.1", "formik": "^2.2.6", "react": "^16.13.1", "react-dom": "^16.13.1", "react-icons": "^3.11.0", "react-router": "^5.2.0", "react-router-dom": "^5.2.0", "react-scripts": "3.4.1", "recharts": "^2.0.7", "styled-components": "^5.1.1", "typescript": "^3.7.5", "yup": "^0.29.3" }, .... * I dont know how to fix that and so i can use recharts

1
typescriptrechartsreact-tsx
It's not really a solution, so I'm not posting it as an "answer", but as a comment. I reverted back from 2.0.7 to 2.0.3 and I no longer have this issue. – CherryNerd
@CherryNerd Thanks it worked. – Rick

1 Answers

4
votes

This is caused by recharts using TypeScript ^3.8. TypeScript 3.8 introduced a new syntax to import and export types, which recharts has taken advantage of. recharts should have bumped the major version number because this is a breaking change (as you discovered). In order to use the latest version of recharts, you will need to bump your version of TypeScript to at least 3.8.