Webpack can't compile when I import "gradient"

[vgross]

I have an issue when I'm trying to import this library.

I'm using webpack, and it doesn't compile the JS file and throws an error at the line:

import gradient from 'chartjs-plugin-gradient';

Here is the error message:

"./node_modules/chartjs-plugin-gradient/dist/chartjs-plugin-gradient.esm.js" contains a reference to the file "chart.js/helpers".
This file can not be found, please check it for typos or update it if the file got moved.

If I try something like:
import helpers from 'chart.js/helpers'; I have no error, so the helpers are found... But I keep having the issue at the line where I import gradient...

Any idea?

[kurkle]

Sorry, can not figure out what could be wrong from the information given

[sofiia-chorna]

I encountered the same issue

[Slion]

Trying to use that plugin from TypeScript and I get a similar issue.

[Slion]

Looks like you need to specify the full path in your import:
import { isNumber, color, defined } from 'chart.js/helpers/helpers.mjs';

[kurkle]

Probably has something to do with bundler and module vs commonjs. Webpack 4?

[Slion]

I'm not sure I'm rather a noob in Node.js.
Looks like I'm running webpack 5.75.0.
It's an easy fix once you worked it out.
It's also suggested in the compilation error logs.

[Slion]

Here are the actual error logs:

ERROR in ./node_modules/chartjs-plugin-gradient/dist/chartjs-plugin-gradient.esm.js 7:0-60
Module not found: Error: Can't resolve 'chart.js/helpers' in '.\node_modules\chartjs-plugin-gradient\dist'
Did you mean 'helpers.mjs'?
BREAKING CHANGE: The request 'chart.js/helpers' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

[kurkle]

@Slion I'm assuming you are using chart.js 4.2.1, right?
Would you be able to create (a very simple) reproduction of the issue?

[Slion]

I'm assuming you are using chart.js 4.2.1, right?

Using chart.js v3.9.1. I could upgrade though I guess.
Gradient plugin seems to work fine once you manage to load it.

Would you be able to create (a very simple) reproduction of the issue?

I'm sure I would, not sure I will find the time though.

[Slion]

I thought I found a proper workaround but somehow that's still not working:
https://stackoverflow.com/questions/70964723/webpack-5-in-ceate-react-app-cant-resolve-not-fully-specified-routes

[Mudit18]

@Slion did you figure out any solution here?

[Slion]

I think I just had my own copy of the plugin that fixed the import path specifying the extension. It's all fairly well explained in the error logs posted above. Ultimately though we stopped using that plugin cause our gradient design specs needed some more fancy stuff. It is a really good plugin though and helped me understand gradients in chart.js.