Chartjs doesn't work with Remix | Remix | Page 1

meager hornet Nov 24, 2022, 4:38 AM

#

I tried to use chart.js and react-chartjs-2 in a Remix project but was not able to.
This error was given when building the page:
The path "react-chartjs-2" is imported in ..\chart.tsx but "react-chartjs-2" was not found in your node_modules. Did you forget to install it?
When go to the route page on the browser, this error was given:

     at new NodeError (node:internal/errors:393:5)
     at throwExportsNotFound (node:internal/modules/esm/resolve:358:9)
     at packageExportsResolve (node:internal/modules/esm/resolve:612:7)
     at resolveExports (node:internal/modules/cjs/loader:529:36)
     at Function.Module._findPath (node:internal/modules/cjs/loader:569:31)
     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:981:27)
     at Function.Module._load (node:internal/modules/cjs/loader:841:27)
     at Module.require (node:internal/modules/cjs/loader:1061:19)
     at require (node:internal/modules/cjs/helpers:103:18)
     at Object.<anonymous> (..\chart.tsx:2:21)
     at Module._compile (node:internal/modules/cjs/loader:1159:14)
     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
     at Module.load (node:internal/modules/cjs/loader:1037:32)
     at Function.Module._load (node:internal/modules/cjs/loader:878:12)
     at Module.require (node:internal/modules/cjs/loader:1061:19)
     at require (node:internal/modules/cjs/helpers:103:18)```
Versions:
```chart.js: v4.0.1
react-chartjs-2: v5.0.1```

#

Was anyone able to use chart.js in Remix before? I tried different methods but still can't rickroll

quaint grove Nov 24, 2022, 5:15 AM

#

You need to add chart.js and react-chartjs-2 to remix.config.js. v4 is esm only.

#

https://nalu.wiki/nalu/p/fixing-dependency-errors-in-remix-187#error-err_require_esm-must-use-import-to-load-es-module

🌊Nalu

Fixing Dependency Errors in Remix

https://nalu.wiki Since July, I have been busy migrating Nalu from NextJS to Remix. **Since both frameworks are built on React, most things work...

meager hornet Nov 24, 2022, 6:10 AM

#

i tried ur method, but still have the same problem

#

quaint grove Nov 24, 2022, 6:28 AM

#

Mmm try downgrade to "react-chartjs-2": "^4.3.1",

#

"chart.js": "^3.9.1",

#

I recall seeing the same warning popped up when migrating to v5 v4 respectfully.

#

You'll still need to do the ClientOnly trick since chartjs is Dom canvas based.

meager hornet Nov 24, 2022, 8:15 AM

#

that does solve the problem

#

i downgraded to "chart.js": "^3.9.1" and "react-chartjs-2": "^4.3.1". now i can render the chart

#

still weird when the lastest version doesn't work. maybe it has something to do with the New exports or Tree-shaking?

#

thats my guess

quaint grove Nov 24, 2022, 8:19 AM

#

Odd thing is mine still works despite the warning. 🤷‍♂️

#

Are your project in a monorepo?

meager hornet Nov 24, 2022, 8:21 AM

#

yes it is

quaint grove Nov 24, 2022, 8:22 AM

#

Module not found seems to be related to some weirdness with the way modules are hoisted. I haven't found a consistent solution for it yet.

meager hornet Nov 24, 2022, 8:27 AM

#

remix is "weird" in its own way already chefkiss

#

btw thanks for ur answer

quaint grove Nov 24, 2022, 8:27 AM

#

No prob!

cinder valve Dec 6, 2022, 4:17 PM

#

also have this same problem, is there a chart library that does not have this esm issue?

cinder valve Dec 6, 2022, 4:46 PM

#

ok downgrading works.

#

anyone figured out how to use the latest version?

#Chartjs doesn't work with Remix