Laravel Vite ReferenceError

Question

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!!!!!

Ismoil Shifoev · Accepted Answer · 2022-11-02 02:54:42Z

1

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

answered Nov 2, 2022 at 2:54

Ismoil Shifoev

6,0893 gold badges27 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Laravel Vite ReferenceError

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related