[SOLVED] Why do I get Highcharts undefined?

Why do I get Highcharts undefined?

I've been using this library for almost a year on several projects and yesterday it was working perfectly as usual but today I'm getting the error on all projects:

Uncaught ReferenceError: Highcharts is not defined

I'm using vanilla JavaScript, HTML and CSS and I imported the CDN on the HTML head tag because that's how I work.

I tried using Highcharts GTP and tested a simple code to make sure the CDN worked but I got the same error in my local testing. This is the code that de AI provided me:

<!DOCTYPE html>
<html>
  <head>
    <title>Stock Chart Example</title>
    <script src="https://code.highcharts.com/stock/highstock.js"></script>
  </head>
  <body>
    <div id="container" style="height: 400px; min-width: 310px"></div>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        Highcharts.stockChart("container", {
          rangeSelector: {
            selected: 1,
          },
          title: {
            text: "AAPL Stock Price",
          },
          series: [
            {
              name: "AAPL",
              data: [
                [Date.UTC(2021, 0, 1), 132.43],
                [Date.UTC(2021, 1, 1), 126.6],
                [Date.UTC(2021, 2, 1), 123.9],
                [Date.UTC(2021, 3, 1), 134.16],
                [Date.UTC(2021, 4, 1), 127.79],
                [Date.UTC(2021, 5, 1), 139.91],
                [Date.UTC(2021, 6, 1), 145.11],
                [Date.UTC(2021, 7, 1), 156.3],
                [Date.UTC(2021, 8, 1), 145.0],
                [Date.UTC(2021, 9, 1), 149.55],
                [Date.UTC(2021, 10, 1), 161.0],
                [Date.UTC(2021, 11, 1), 177.57],
              ],
              tooltip: {
                valueDecimals: 2,
              },
            },
          ],
        });
      });
    </script>
  </body>
</html>

Solution

This is the risk of always using the latest version which can be updated at any point without testing and is why many people (including myself) advocate not relying on whatever the latest version is and always testing updated versions when upgrading. You should specify the specific version you want when using the highcharts CDN (or any other hosted scripts). Doing this you shouldn't be surprised by any "broken" updates to libraries your application depends upon.

Taking a quick look at the Highcharts CDN reveals that the current version (as of 20/12/2024) is 12.1.1 and was released today with the previous version, 12.1.0, being released on 17/12/2024.

Try updating your script tag to explicitly use this previous version:

<script src="https://code.highcharts.com/stock/12.1.0/highstock.js"></script>

UPDATE

Although I wouldn't expect any breaking changes by a bug release, by taking the latest version you are always going to be at risk from breaking changes between major versions.