2

I installed chartjs and react-chartjs-2 using yarn add react-chartjs-2 chart.js. However, when I import any components from the react-chartjs-2 library, this error is thrown:

The path "react-chartjs-2" is imported in [path]\chart.tsx but "react-chartjs-2" was not found in your node_modules. Did you forget to install it?

Anyone has any ideas what is the problem here?

I tried this method by adding this into package.json but still didn't work:

{
  "type": "module"
}

I also tried using this npx rmx-cli get-esm-packages react-chartjs-2 to add the dependencies to my serverDependenciesToBundle, still no work.

Tuan Ngo
  • 23
  • 4

1 Answers1

2

I assume you are using the lastest version of chartjs and react-chartjs-2, which are v4.0.1 and v5.0.1 respectively. Try downgrading to "chart.js": "^3.9.1" and "react-chartjs-2": "^4.3.1". This might happen when migrating chartjs from v3 to v4.

And please keep in mind that you need to use chartjs in ClientOnly, because chartjs is DOM canvas based.

zerot69
  • 88
  • 8
  • I tried downgrading to your recommended version but getting this error now `Canvas is already in use. Chart with ID '0' must be destroyed before the canvas with ID '' can be reused.` – Tuan Ngo Nov 25 '22 at 03:27
  • As [here](https://stackoverflow.com/a/74308415/12463093), if you are using React with Typescript import this `import "chart.js/auto";` – zerot69 Nov 25 '22 at 03:30
  • It worked for my legacy project. Thank you – Fabho Jan 10 '23 at 23:22