Chart.js 3.9.1 throws cannot read property of undefined reading prototype error in react

Question

I am using React 16 and try to implement a sankey chart visualization with Chart.js. Since Chart.js v4 requires Webpack 5 or some other Babel magic that I cannot really change in my clusterf**k of a project, I downgraded to v3.9.1 and now I am encountering the error Uncaught TypeError: Cannot read properties of undefined (reading 'prototype') .

This is my component code

import { Chart as ChartJS, registerables } from "chart.js";
import { SankeyController, Flow } from "chartjs-chart-sankey";
import React, { useState} from "react";
import "./SankeyChart.css";
import { Chart } from "react-chartjs-2";

interface SankeyChartProps {
  config: any;
}

ChartJS.register(SankeyController, Flow);

export const SankeyChart = (props:SankeyChartProps) => {

  const [colors,setColors] = useState({
    Oil: "#000000",
    Coal: "gray",
    "Fossil Fuels": "slategray",
    Electricity: "blue",
    Energy: "orange",
  })
  const [priority, setPriority] = useState({
    Oil: 1,
    "Natural Gas": 2,
    Coal: 3,
    "Fossil Fuels": 1,
    Electricity: 2,
    Energy: 1,
  })
  const [labels, setLabels] = useState({
    Oil: "black gold (label changed)",
  })
  const [data, setData] = useState({
    datasets: [
      {
        data: [
          { from: "Oil", to: "Fossil Fuels", flow: 15 },
          { from: "Natural Gas", to: "Fossil Fuels", flow: 20 },
          { from: "Coal", to: "Fossil Fuels", flow: 25 },
          { from: "Coal", to: "Electricity", flow: 25 },
          { from: "Fossil Fuels", to: "Energy", flow: 60 },
          { from: "Electricity", to: "Energy", flow: 25 },
        ],
        priority,
        labels,
        colorFrom: (c) => getColor(c.dataset.data[c.dataIndex].from),
        colorTo: (c) => getColor(c.dataset.data[c.dataIndex].to),
        borderWidth: 2,
        borderColor: "black",
      },
    ],})
  const [options, setOptions] = useState({
    plugins: {
      tooltip: {
        callbacks: {
          label: function (context) {
            const { from, to, flow } = context.raw;
            return `${from} → ${to}: ${flow}`;
          },
        },
      },
    },
  })
  
  
  function getColor(name)
  {
    return colors[name] || "green"
  }
  return <Chart type="sankey" data={data} options={options}/>
};

The error happens in the ChartJS.register line. Another thread said that you need to load it lazily which I did with the component in its parent but it did not help. I also set up a test project that contained the exact same code and that worked.