Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

LaCoder's avatar

Livewire component JS script Uncaught SyntaxError: Unexpected token

Hello,

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?

1 like
0 replies

Please or to participate in this conversation.