Using chartjs and react-chartjs-2 in Remix gets error "react-chartjs-2" was not found in your node_modules

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.

>Solution :

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.