使用CKEditor 5搭配Livewire v3时出现'Unpacked'错误求修复

问题场景 #

整合CKEditor 5与Livewire v3时触发「Only arrays and Traversables can be unpacked」错误，相关代码如下：

JS代码 #

ClassicEditor
    .create(document.querySelector('#content'))
    .then(editor => {
        editor.model.document.on('change:data', () => {
            console.log(editor.getData());
            var content = editor.getData();
            Livewire.dispatch('updateContent', content); // 向Livewire发送事件
        })
    })
    .catch(error => {
        console.error(error);
    });

HTML代码 #

<div class="mb-4">
    <div wire:ignore>
        <label class="form-label" for="content">Content</label>
        <textarea type="text" id="content" class="form-control @error('content') is-invalid @enderror" wire:model.live.debounce.300ms="content" name="content" placeholder="Enter content"></textarea>
    </div>
    @error('content')
        <span class="text-danger">{{ $message }}</span>
    @enderror
</div>

PHP Livewire代码 #

#[On('updateContent')]
public function updateContent($newContent)
{
    dd('hi');
    $this->content = $newContent; 
}

错误原因 #

Livewire v3的Livewire.dispatch()方法要求第二个参数必须是数组形式的参数列表。当前代码直接传递字符串content，Livewire会尝试将其作为可遍历对象解构（unpack），但字符串不属于数组或可遍历类型，因此抛出该错误。

修复方案 #

修改JS代码中Livewire.dispatch的传参方式，将单个参数包裹在数组中：

ClassicEditor
    .create(document.querySelector('#content'))
    .then(editor => {
        editor.model.document.on('change:data', () => {
            console.log(editor.getData());
            var content = editor.getData();
            Livewire.dispatch('updateContent', [content]); // 用数组包裹参数
        })
    })
    .catch(error => {
        console.error(error);
    });

修改后，Livewire会正确识别参数为单个元素的数组，不会尝试解构字符串，错误即可解决。

内容的提问来源于stack exchange，提问作者nguyenthanhson