Livewire组件脚本报错Uncaught SyntaxError: Unexpected token 'var'的原因咨询

你好，这个问题其实和Livewire处理@script块的方式直接相关，我来帮你拆解一下：

核心原因：Livewire对@script代码的包装逻辑 #

Livewire 3的@script标签会把你编写的脚本代码，自动包装成一个异步箭头函数来执行。而箭头函数有一个严格的语法规则：

• 如果函数体是单个表达式，可以省略大括号直接写内容；
• 如果函数体包含多个语句（比如变量声明、函数调用等），必须用{}把所有代码包裹起来。

当你直接在@script顶层写var options = ...这类变量声明语句时，Livewire生成的箭头函数结构类似这样：

async ($wire) => var options = {...}; // 语法错误！语句没有被大括号包裹

这种写法违反了箭头函数的语法规则，所以JS解析器会抛出Unexpected token 'var'的错误。

为什么移到$wire.on回调里就正常？ #

当你把变量声明放到$wire.on的回调函数内部后，你的顶层代码就变成了$wire.on(...)——这是一个函数调用表达式，而非语句。此时Livewire生成的箭头函数结构是：

async ($wire) => $wire.on('dataUpdated', () => { /* 你的回调代码 */ });

这种写法符合箭头函数的语法要求（单个表达式可以省略大括号），所以能正常执行。

解决方法 #

最直接的修复方式，就是把@script里的所有代码用大括号包裹起来，明确告诉Livewire这是一个完整的函数体：

@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

另外补充个小建议：尽量用const/let替代var，这是现代JavaScript的最佳实践，能避免不少变量作用域相关的问题，不过这不是本次报错的直接原因哦。

备注：内容来源于stack exchange，提问作者rjcode