Livewire component JS script Uncaught SyntaxError: Unexpected token

Question

I am using livewire component and in component blade file I am using script,

@assets
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
@endassets

@script
    <script>
        var options = {
            series: [],
            legend: {
                show: false
            },
            chart: {
                height: '650px',
                type: 'treemap'
            },
            dataLabels: {
                enabled: true,
                style: {
                    fontSize: '12px',
                },
                formatter: function(text, op) {
                    return [text, op.value]
                },
                offsetY: -4
            },
            plotOptions: {
                treemap: {
                    enableShades: true,
                    shadeIntensity: 0.5,
                    reverseNegativeShade: true,
                    colorScale: {
                        ranges: [{
                                from: -6,
                                to: 0,
                                color: '#CD363A'
                            },
                            {
                                from: 0.001,
                                to: 6,
                                color: '#52B12C'
                            }
                        ]
                    }
                }
            }
        };

        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();

        $wire.on('dataUpdated', (data) => {
            const dataArray = data[0];
            // Map the data to format it properly
            const mappedData = dataArray.map(item => ({
                x: item.asset_symbol,
                y: item.pchange
            }));

            mappedData.sort((a, b) => b.y - a.y);

            chart.updateSeries([{
                data: mappedData
            }]);

            console.log(dataArray);
            console.log('updated');
        });
    </script>
@endscript

But when the page loads, it throws an error

livewire.js?id=5d8beb2e:1243  **Uncaught SyntaxError: Unexpected token 'var'**
    at new AsyncFunction (<anonymous>)
    at safeAsyncFunction (livewire.js?id=5d8beb2e:1243:21)
    at generateFunctionFromString (livewire.js?id=5d8beb2e:1253:16)
    at generateEvaluatorFromString (livewire.js?id=5d8beb2e:1258:16)
    at normalEvaluator (livewire.js?id=5d8beb2e:1223:111)
    at evaluateLater (livewire.js?id=5d8beb2e:1213:12)
    at Object.evaluate (livewire.js?id=5d8beb2e:1209:5)
    at livewire.js?id=5d8beb2e:8592:28
    at Object.dontAutoEvaluateFunctions (livewire.js?id=5d8beb2e:1203:18)
    at livewire.js?id=5d8beb2e:8591:26

If I move var options.... after $wire.on function then it loads correctly,

Why component script does not recognise var or const?

Answer 1

The problem you're running into is like trying to fit a square peg in a round hole because of the way Livewire handles scripts in its component files. Basically, Livewire gets a bit confused when it sees standard JavaScript mixed in with its own system directly in the blade files.

When you put your script tag directly in the blade with @script, Livewire tries to process it in its own special way. But, it's not always great at understanding the usual JavaScript stuff like var or const when it's done like this. That's why you're seeing that "Unexpected token 'var'" error. It's as if Livewire is saying, "I don't know what you're trying to do here!"

Moving your JavaScript code (var options...) to a different spot and it suddenly working is kind of like finding an unexpected workaround. It changes how Livewire sees and deals with the script, even though it's not immediately obvious why that fixes the error.

Leverage @push and @stack: These Livewire directives are awesome for managing where and when your scripts load on the page, giving you more control and avoiding conflicts.

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
    document.addEventListener('livewire:load', function () {
        // Your script
    });
</script>
@endpush