3 to 4 update breaks: Unexpected token...

[Synchro]

My build process (using vite with Laravel) for 3.x copies chart.js out of node_modules into a build folder, and then I load it from my templates like this:

    <script src="{{ asset('build/js/chart.js') }}"></script>

Then when I want to draw a graph, I do:

<script>
            const myChart = new Chart(document.getElementById('myChart').getContext('2d'), {
...

This is all working fine: libraries load, graphs are drawn.

I updated from chart.js 3 to 4, simply by changing the version number in my package.json, reinstalling, and rebuilding my assets, and it breaks. The first issue is that I get:

SyntaxError: Unexpected token '{'. import call expects one or two arguments.
(anonymous function) — chart.js:7

From this I gather that the format of chart.js changed (though not mentioned in the migration docs?), so I need to add type="module" to the script tag to fix that. But then when I try to create an instance, it can't find Chart:

ReferenceError: Can't find variable: Chart

I tried adding this to the top of my script:

import { Chart } from 'chart.js';

but then I just get the first error again; this is clearly a clash of library types or something, but I wasn't expecting any of this to break.

What am I doing wrong?

[Synchro]

I found the answer: The filename has changed. I now need to load chart.umd.js instead of plain chart.js. This would be useful to add to the migration guide.