DevTools failed to load source map, chart.js behaving abnormally

Question

This is my first javascript project, so I apologize for being ignorant of basically everything.

I made a basic data site for a hobby which has been up for a couple weeks now without incident. Today however I saw that it was behaving strangely: the chart I made is stuck in a loop of shrinking to a single point, and then maximizing, and then shrinking again. The site has been made unusable.

No changes have been made to my code in 12 days, the behavior started some time in the past 24 hours. It's the same in Edge.

Chrome console: DevTools failed to load source map: Could not load content for https://cdn.jsdelivr.net/npm/chart.umd.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Loading that URL in Chrome shows the same, so OK, it's not there. Can't argue with facts. But I guess it used to be? Why is it not there now?

I've integrated chart.js as follows

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-annotation.min.js"></script>

And here's the site itself: https://rejetme.com/

I legitimately have no idea what changed. I would appreciate any help getting back on track here. Thanks.

Answer 1

Ok, classic rookie mistake. Big surprise, I know. It turns out that chart.js just updated to v4.0.1 two days ago, and includes some breaking changes.

So I pinned the version of chart.js that my site uses:

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

I guess another option would be to host the libraries locally, but ain't nobody got time for that. I'm going to mark this as answered.