Using chartjs and react-chartjs-2 in Remix gets error "react-chartjs-2" was not found in y-CodePudding

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.

CodePudding user response：

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.

CodePudding user response：

try these solutions:

1 - do npm install chart.js and if it gives an error do npm i chart.js --legacy-peer-deps.(if you're using yarn you could use yarn add chart.js

2- Don't forget that to use the library in your react project you should import it this way:

import { Pie } from "react-chartjs-2";

And not

import { Pie } from "@reactchartjs/react-chart.js"; // This import is used for 
the example files only

I found these solutions based on GitHub users' responses.I hope it'll help you out