Chart.js
Chart.js copied to clipboard
chartjs
CDN version of the plain (esm) chart.js cannot be imported?
Expected behavior
I expected to be able to import Chart from the CDN url https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.js
Current behavior
Uncaught (in promise) TypeError: The specifier “@kurkle/color” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”.
Reproducible sample
no full example necessary
Optional extra steps/info to reproduce
Open a dev console and run import("https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.js").then(lib => console.log(lib)). It'll error out.
Possible solution
No response
Context
https://www.chartjs.org/docs/latest/getting-started/installation.html suggests that if you don't want to use npm (for instance, you're working on a "classic" web page that's just static HTML, CSS, and JS) you can use one of several CDNs with CDNJS listed as first option, so that's what folks will most likely go for.
https://www.chartjs.org/docs/latest/getting-started/integration.html then teaches people that it's an ES module so import works out of the box, and so we run into a problem because instead it errors out.
chart.js version
4.4.0
Browser name and version
n/a
Link to your project
n/a
Just found the same issue and, following the issue mentioned above, solved it by linking the version with "umd" in its name. For example, <cdn>/Chart.js/4.4.0/chart.umd.min.js
@mukham12 that's a server-side issue though, so probably caused by something else.
@hfingler that's not really a solution if you're writing modern JS with ES modules, though. UMD exports are incompatible with ESM, You just end up importing a module that has no exports, which means you still can't do anything.
(open dev tools, and run import("https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js").then(module => console.log(module)); for example. You'll see it succeed because the JS file exists, but you'll also see it show an empty module)
Good point. I'm working on a small, simple project, so that was enough for me.
Same, but I'm only working in modern JS these days (both in the browser and in Node), so it has to be ESM-loadable.
This does not work nether, even with a very simple example page, basically slightly varied from the first step in the tutorial. I am using Django and had no problem with the version 3. I would prefer not to get back to this version for the new project. Now I get (the server from the browsers error message is my static files server, I have no idea, why/how Firefox looks there):
Source-Map-Fehler: Error: request failed with status 404
Ressourcen-Adresse: https://myserver.de/sh2/js/chart.umd.js
Source-Map-Adresse: chart.umd.js.map
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js"></script>
<div>
<canvas id="myChart"></canvas>
</div>
<script>
console.log(Date.now());
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'line',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
@ludgerh that's a different version with a different problem, though. I've updated the title, but for this particular it'll be better to delete those comments and file a separate one.
Imagine you are selecting a JS lib do charting for your project and try to run some simple tests in the browser. This bug is a complete dealbreaker. "Moving on to then next lib ... ". Surly hope this is fixed soon.
I ran into the same issue, which seems to be that the documentation and the CDN deployed scripts suffer from some mismatch.
My main "use case" here is that I was trying to avoid having a package.json file and an NPM stack in a tiny prototype.
I'm with the same problem in Vanilla JavaScritp... The unique solution was to use the CDN from the example in the documentation. Without Typescript or imports, only the link of CDN in the script tag.
