Laravel11+Livewire3+AlpineJS3中$persist重定义报错求助

安全阿岳

2026-6-22

解决Alpine.js $persist重复定义错误

问题根源

Livewire 3 内置的 Alpine.js 实例通常已经自动注册了 @alpinejs/persist 插件，你手动重复注册就会触发「Cannot redefine property: $persist」错误。另外，插件注册时机与 Livewire 初始化流程冲突也可能导致该问题。

可行解决方案

方案1：移除手动注册的persist插件

直接删除app.js中手动导入和注册persist的代码，因为Livewire 3默认集成了该插件：
修改后的app.js：

import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';

window.Alpine = Alpine;

/* Stores */
Alpine.store('darkMode', {
  on: Alpine.$persist(true).as('darkMode_on'),
  toggle() {
    this.on = !this.on;
  },
});

Livewire.start();

方案2：独立导入Alpine并注册插件

如果你的Livewire版本未内置persist，或需要自定义插件版本，直接从alpinejs包导入Alpine实例，避免使用Livewire内部的实例：
修改后的app.js：

import Alpine from 'alpinejs';
import persist from '@alpinejs/persist';
import { Livewire } from '../../vendor/livewire/livewire/dist/livewire.esm';

window.Alpine = Alpine;
Alpine.plugin(persist);

Alpine.store('darkMode', {
  on: Alpine.$persist(true).as('darkMode_on'),
  toggle() {
    this.on = !this.on;
  },
});

Livewire.start();