Laravel中blade-ui-kit的Pikaday组件报错：Maximum call stack size exceeded问题求助

从报错的调用栈来看，核心问题是Pikaday组件的事件与Livewire的dispatch机制形成了无限循环：

• blade-ui-kit 0.3.1版本的默认x-pikaday组件内部使用了$wire.set()来更新值（即便你的表单是普通HTML表单，不是Livewire组件）
• 当页面加载了@livewireScripts时，全局的$wire对象存在，调用$wire.set()会触发Livewire的状态更新
• Livewire更新后会尝试重新同步DOM，导致Pikaday组件重新初始化，再次触发onSelect事件，进而再次调用$wire.set()，最终引发栈溢出错误

其他组件（如x-form、x-trix）正常工作，是因为它们没有绑定这种会触发Livewire循环更新的逻辑。

最直接的方案是自定义一个不依赖Livewire绑定的Pikaday组件，适配普通HTML表单的场景：

步骤1：创建自定义Pikaday组件 #

在resources/views/components目录下新建pikaday.blade.php文件，内容如下：

@props(['name', 'value' => null, 'format' => 'YYYY-MM-DD'])

<div x-data="{ date: '{{ $value ?? '' }}' }" x-init="
    // 初始化Pikaday日历
    new Pikaday({
        field: $refs.dateInput,
        format: '{{ $format }}',
        // 仅在用户选择日期时更新input值，不触发Livewire事件
        onSelect: function(selectedDate) {
            date = selectedDate.toISOString().split('T')[0];
        }
    })
">
    <input 
        type="text"
        name="{{ $name }}"
        x-ref="dateInput"
        x-model="date"
        {{ $attributes->merge(['class' => 'block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50']) }}
    >
</div>

步骤2：替换原组件引用 #

在create.blade.php中，把原有的<x-pikaday name="published_at" />替换为自定义组件：

<x-pikaday name="published_at" />

（如果你的自定义组件命名不同，比如x-custom-pikaday，记得对应修改）

可选：验证版本兼容性 #

如果你想继续使用官方组件，可以尝试升级blade-ui-kit到更稳定的版本（比如0.4.x，适配Laravel 8），新版本可能修复了这种非Livewire场景下的事件冲突问题。升级命令：

composer require blade-ui-kit/blade-ui-kit:^0.4

修改完成后，清除浏览器缓存，重新打开页面：

• 点击Pikaday组件，日历正常弹出
• 控制台不再出现栈溢出错误
• 选择日期后，input值正确更新，表单提交时published_at参数能正常传递到后端

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