CDN version of the plain (esm) chart.js cannot be imported? #11592

Pomax · 2023-11-23T18:54:08Z

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

The text was updated successfully, but these errors were encountered:

mukham12 · 2023-11-26T13:58:25Z

May be similar to #10915.

hfingler · 2023-11-26T18:02:05Z

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

Pomax · 2023-11-26T19:38:00Z

@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)

hfingler · 2023-11-26T21:36:11Z

Good point. I'm working on a small, simple project, so that was enough for me.

Pomax · 2023-11-27T04:09:43Z

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.

ludgerh · 2023-12-10T11:49:21Z

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 · 2023-12-10T12:51:06Z

...found an easy solution that works for me:

Pomax · 2023-12-10T16:48:37Z

@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.

devlaam · 2024-02-17T18:27:02Z

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.

benjaoming · 2024-06-13T10:12:14Z

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.

Zafkiel45 · 2024-07-23T15:54:23Z

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.

ferouzkassim · 2024-09-24T07:39:15Z

@Zafkiel45 i was running through the same issue al i did was download the source files then have ascript tag in my html before i imported my other js script so teh variable Chart will alwasy be got from the script above it i hope others wi be alble to fix it the sae way

benc-uk · 2024-11-10T21:27:55Z

Chart.js feels more than a little out of step with modern JS if I can't import it from a ESM source, the entire ecosystem of JS is moving on from UMD

Having to using script tags in the HTML is a massive step backwards

Pomax · 2024-11-11T02:38:27Z

Using script tags is perfectly fine (and actually improves performance because you're letting the browser take care of caching. The biggest crime against getting the best performance is bundling) but the lack of a working library is a bit of a problem.

ferouzkassim · 2024-11-11T03:29:18Z

I had the same issue I used script tags now when u want to use it in the JavaScript use the window object window.chartjs it will be available on the window object

…

On Mon, 11 Nov 2024, 05:38 Pomax, ***@***.***> wrote: Using script tags is perfectly fine (and actually *improves* performance because you're letting the browser take care of caching. The biggest crime against getting the best performance is bundling). But the lack of a working library is a bit of a problem. — Reply to this email directly, view it on GitHub <#11592 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFRDI3B4AUOWZ5VOLCUCB7L2AAKDVAVCNFSM6AAAAAA7YFE6N6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINRXGEYTSMZYHE> . You are receiving this because you commented.Message ID: <chartjs/Chart. ***@***.***>

lonix1 · 2024-11-11T08:04:19Z

using script tags in the HTML is a massive step backwards

Keep in mind not everyone uses Node-related tools. So some of us just need a working script we can load from a CDN.

benc-uk · 2024-11-11T10:50:01Z

using script tags in the HTML is a massive step backwards

Keep in mind not everyone uses Node-related tools. So some of us just need a working script we can load from a CDN.

I'm not using Node, I'm trying to use Chart.js in a vanilla JS project using ESM and modules, i.e. import { Chart } from 'some-cdn-url-here' in a JS file, no Node, no bundling & no TypeScript

The ESM CSN version available at this URL https://cdn.jsdelivr.net/npm/chart.js@4.4.6/+esm doesn't work, as it hasn't been correctly bundled and has external imports that don't work

ferouzkassim · 2024-11-12T15:24:57Z

load this in your index html that is after downaoding the files from the repo then after it will load the chartjs ina the dom then after do soething like this
new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [
{
label: 'Total Quantity Left',
type: 'line',
data: alignedProductQuantities,
backgroundColor: 'rgba(49, 197, 243)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
},
{
label: 'Sold this Month',
type: 'line',
data: alignedOrderCounts,
backgroundColor: 'rgba(78, 132, 135)',
borderColor: 'rgba(142, 142, 142)',
borderWidth: 2,
fill: false,
tension: 0.4
}
]
}, then it wil consider thee variable Chart as one that comes from te window objecct so it will be globally accesed in your application you dont have to import it as an esm module

Pomax · 2024-11-12T16:06:42Z

@ferouzkassim please read the first comment, which clearly explains that your comment shouldn't be in this thread because it's specifically about loading Chart.js, the plain ESM version, from CDN. The code you're showing is neither of those things, and it would be much more helpful if you deleted it again.

altbdoor · 2024-11-14T07:24:13Z

I was able to make ChartJS work in ESM, by loading it from https://esm.sh instead. I've also made a minimal example in https://stackblitz.com/edit/vitejs-vite-1jfgup?file=index.html

The general idea is to:

Start by importing https://esm.sh/chart.js@4.4.6?bundle-deps=
- ?bundle-deps will bundle the two dependencies that causes trouble in jsdelivr
This URL can be used in .mjs with either:
1. dynamic imports, const chartlib = await import(''), or
2. import statements, import * as chartlib from ''
3. chartlib is a placeholder name, feel free to call it whatever you want
If tree-shaking is needed, we can go further with ?exports= (see esm.sh docs)

Edit: for the sake of brevity...

Using esm.sh requires you to manually register the components/plugins

import * as chartlib from 'https://esm.sh/chart.js@4.4.6?bundle-deps=';

// to register everything
chartlib.Chart.register(...chartlib.registerables);

// to register some, but really only makes sense with `?exports=`
// for what can be exported, see https://www.chartjs.org/docs/latest/getting-started/integration.html#bundle-optimization
chartlib.Chart.register(chartlib.Chart, chartlib.BarController, chartlib.BarElement);

const chart = new chartlib.Chart();

Pomax · 2024-11-14T17:09:57Z

That is an excellent workaround for now, thank you for posting that.

benc-uk · 2024-11-15T15:00:12Z

I'll second that! I just tried this workaround, using esm.sh and it's working great in my mjs code, and thanks for the working example as I would have never found the need to call Chart.register() myself

Awesome thank you

altbdoor · 2024-11-15T16:58:10Z

@benc-uk that action wasn't really clear to me either, as it was implicitly handled in auto.js, which would be 99% of any dev's entry point 💡

Chart.js/auto/auto.js

Lines 1 to 3 in bb82c8f

    
           import {Chart, registerables} from '../dist/chart.js'; 
        
           Chart.register(...registerables);

When I explored proper tree-shaking with esm.sh, that's when I found #10163 , which shows how registration works 🎉

Pomax added the type: bug label Nov 23, 2023

Pomax changed the title ~~CDN version of chart.js cannot be imported?~~ CDN version of the plain (esm) chart.js cannot be imported? Dec 10, 2023

adipasquale mentioned this issue Jan 29, 2024

Replace Vite with Import Maps & Propshaft betagouv/collectif-objets#1065

Closed

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CDN version of the plain (esm) chart.js cannot be imported? #11592

CDN version of the plain (esm) chart.js cannot be imported? #11592

Pomax commented Nov 23, 2023

mukham12 commented Nov 26, 2023 •

edited

Loading

hfingler commented Nov 26, 2023 •

edited

Loading

Pomax commented Nov 26, 2023 •

edited

Loading

hfingler commented Nov 26, 2023

Pomax commented Nov 27, 2023 •

edited

Loading

ludgerh commented Dec 10, 2023 •

edited

Loading

ludgerh commented Dec 10, 2023 •

edited

Loading

Pomax commented Dec 10, 2023

devlaam commented Feb 17, 2024

benjaoming commented Jun 13, 2024

Zafkiel45 commented Jul 23, 2024

ferouzkassim commented Sep 24, 2024

benc-uk commented Nov 10, 2024 •

edited

Loading

Pomax commented Nov 11, 2024 •

edited

Loading

ferouzkassim commented Nov 11, 2024 via email

lonix1 commented Nov 11, 2024

benc-uk commented Nov 11, 2024 •

edited

Loading

ferouzkassim commented Nov 12, 2024

Pomax commented Nov 12, 2024 •

edited

Loading

altbdoor commented Nov 14, 2024 •

edited

Loading

Pomax commented Nov 14, 2024

benc-uk commented Nov 15, 2024

altbdoor commented Nov 15, 2024

CDN version of the plain (esm) chart.js cannot be imported? #11592

CDN version of the plain (esm) chart.js cannot be imported? #11592

Comments

Pomax commented Nov 23, 2023

Expected behavior

Current behavior

Reproducible sample

Optional extra steps/info to reproduce

Possible solution

Context

chart.js version

Browser name and version

Link to your project

mukham12 commented Nov 26, 2023 • edited Loading

hfingler commented Nov 26, 2023 • edited Loading

Pomax commented Nov 26, 2023 • edited Loading

hfingler commented Nov 26, 2023

Pomax commented Nov 27, 2023 • edited Loading

ludgerh commented Dec 10, 2023 • edited Loading

ludgerh commented Dec 10, 2023 • edited Loading

Pomax commented Dec 10, 2023

devlaam commented Feb 17, 2024

benjaoming commented Jun 13, 2024

Zafkiel45 commented Jul 23, 2024

ferouzkassim commented Sep 24, 2024

benc-uk commented Nov 10, 2024 • edited Loading

Pomax commented Nov 11, 2024 • edited Loading

ferouzkassim commented Nov 11, 2024 via email

lonix1 commented Nov 11, 2024

benc-uk commented Nov 11, 2024 • edited Loading

ferouzkassim commented Nov 12, 2024

Pomax commented Nov 12, 2024 • edited Loading

altbdoor commented Nov 14, 2024 • edited Loading

Pomax commented Nov 14, 2024

benc-uk commented Nov 15, 2024

altbdoor commented Nov 15, 2024

mukham12 commented Nov 26, 2023 •

edited

Loading

hfingler commented Nov 26, 2023 •

edited

Loading

Pomax commented Nov 26, 2023 •

edited

Loading

Pomax commented Nov 27, 2023 •

edited

Loading

ludgerh commented Dec 10, 2023 •

edited

Loading

ludgerh commented Dec 10, 2023 •

edited

Loading

benc-uk commented Nov 10, 2024 •

edited

Loading

Pomax commented Nov 11, 2024 •

edited

Loading

benc-uk commented Nov 11, 2024 •

edited

Loading

Pomax commented Nov 12, 2024 •

edited

Loading

altbdoor commented Nov 14, 2024 •

edited

Loading