ApexCharts with NPM and Vite

Hey!

So I've installed ApexCharts with NPM and I'm using Vite as my asset bundler. When I run vite build it runs successfully, I get no errors. However, when I visit a page that uses a chart, I get the following error in the console:

(index):482 Uncaught ReferenceError: ApexCharts is not defined

I've tried a few different ways to try and get it to work, but below is my current attempt:

app.js

import './bootstrap';

import ApexCharts from 'apexcharts';
window.ApexCharts = ApexCharts;

index.blade.php

<div>
    <div id="chart" class="w-96"></div>
</div>

<script>
    const chart = new ApexCharts(document.querySelector('#chart'), {
        // Chart options here
        series: [{
            name: 'Series 1',
            data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
        }],
        chart: {
            type: 'line',
            height: 350
        },
        xaxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']
        }
    });

    chart.render();
</script>

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    build: {
        chunkSizeWarningLimit: 1600
    }
});

What have I missed out to get my chart to render? I feel like it's something missing from the Vite config.