Laravel Vite ReferenceError-CodePudding

I am looking for help with an error relating to Vite. Trying to import ApexCharts into a new Laravel app using Vite.

Following steps on the ApexCharts installation docs: https://apexcharts.com/docs/installation/

NPM installation was successful. I've added the import to my app.js file:

import ApexCharts from 'apexcharts';

Running Vite servier with npm run dev. I do not get any errors.

I am trying to load a stripped down blade file for troubleshooting:

@vite(['resources/js/app.js']);

<div id="test"></div>

<script type="module">
    var options = {
        chart: {
            type: 'line'
        },
        series: [{
            name: 'sales',
            data: [30,40,35,50,49,60,70,91,125]
        }],
        xaxis: {
            categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
        }
    }

    var chart = new ApexCharts(document.getElementById('test'), options);

    chart.render();
</script>

I get the error:

(index):19 Uncaught ReferenceError: ApexCharts is not defined
    at (index):19:17

I tried running npm run build and the ApexCharts import is in the build asset.

I was thinking it might be a loading order issue, but I get the uncaught reference error even if I try to create a new ApexCharts after the page has finished loading.

Any help would be greatly appreciated!!!!!

CodePudding user response：

import ApexCharts from 'apexcharts';
window.ApexCharts = ApexCharts; // return apex chart

based on the apexcharts.js in order to import it you need to define the variables for it first and you need to expose it via window.ApexCharts in order to use it outside webpack bundle