chart.js doesn't load in flow+hilla

Question

Made a hilla view based on the standard start.vaadin.com bundle for version 23. I use chart.js version 3.8.2, but also later versions have the same issue.

import { html } from 'lit';
import { customElement, query } from 'lit/decorators.js';
import { View } from '../../views/view';
import * as ChartJS from 'chart.js';


@customElement('welcome-view')
export class WelcomeView extends View {

  @query('#plot')
  plot!: HTMLCanvasElement;

  connectedCallback() {
    super.connectedCallback();
    this.classList.add('flex', 'p-m', 'gap-m', 'items-end');
  }

  createRenderRoot() {
    // Do not use a shadow root
    return this;
  }

  firstUpdated(changedProperties: Map<string | number | symbol, unknown> | undefined) {

    const data = [
      { year: 2010, count: 10 },
      { year: 2011, count: 20 },
      { year: 2012, count: 15 },
      { year: 2013, count: 25 },
      { year: 2014, count: 22 },
      { year: 2015, count: 30 },
      { year: 2016, count: 28 },
    ];
    try {
      new ChartJS.Chart(
          this.plot,
          {
            type: 'bar',
            data: {
              labels: data.map(row => row.year),
              datasets: [
                {
                  label: 'Acquisitions by year',
                  data: data.map(row => row.count)
                }
              ]
            }
          }
      );
    } catch(e:unknown){
      if (typeof e === "string") {
        console.log("Chart exception:"+e);
      } else if (e instanceof Error) {
        console.log("Chart exception:"+e.message);
      }
    }
  }

  render() {
    return html`
      <div style="height: 800px;width: 800px;"><canvas id="plot"></canvas></div>
    `;
  }
}

Produces the following console.log message: "Chart exception:"bar" is not a registered controller."

Any idea's?

I suspect it is related to vite? I didn't try webpack yet, since that is deprecated.