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

Question

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.

zerot69 · Accepted Answer · 2022-11-25 03:25:32Z

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.

answered Nov 25, 2022 at 3:25

zerot69

988 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tuan Ngo Over a year ago

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.

zerot69 Over a year ago

As here, if you are using React with Typescript import this import "chart.js/auto";

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related