Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
Pomax opened this issue Nov 23, 2023 · 10 comments
Open

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

Pomax opened this issue Nov 23, 2023 · 10 comments
Labels
type: bug

Comments

@Pomax
Copy link

Pomax commented Nov 23, 2023

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
@mukham12
Copy link
Contributor

mukham12 commented Nov 26, 2023 •
edited
Loading

May be similar to #10915.

@hfingler
Copy link

hfingler commented Nov 26, 2023 •
edited
Loading

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
Copy link
Author

Pomax commented Nov 26, 2023 •
edited
Loading

@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
Copy link

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

@Pomax
Copy link
Author

Pomax commented Nov 27, 2023 •
edited
Loading

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
Copy link

ludgerh commented Dec 10, 2023 •
edited
Loading

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
Copy link

ludgerh commented Dec 10, 2023 •
edited
Loading

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

@Pomax 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
@Pomax
Copy link
Author

Pomax commented Dec 10, 2023

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

@adipasquale adipasquale mentioned this issue Jan 29, 2024
Closed
7 tasks
@devlaam
Copy link

devlaam commented Feb 17, 2024

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
type: bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@Pomax @benjaoming @devlaam @hfingler @ludgerh @mukham12