Cannot redefine property: $persist

[terryupton]

I am seeing the following error in my console when using the Persist plugin.

Cannot redefine property: $persist
    at Function.defineProperty (<anonymous>)
    at src_default (module.esm.js:26:10)
    at Object.plugin (module.esm.js:1372:3)
    at index.js?t=1671709475346:12:8
warnFailedFetch @ client.ts:113
fetchUpdate @ client.ts:430
await in fetchUpdate (async)
(anonymous) @ client.ts:159
handleMessage @ client.ts:157
(anonymous) @ client.ts:91

Failed to reload /src/js/index.js. This could be due to syntax errors or importing non-existent modules. (see errors above)

My setup looks like this:

index.js

import Alpine from 'alpinejs';
import persist from '@alpinejs/persist';
import focus from '@alpinejs/focus';

window.Alpine = Alpine;

Alpine.plugin(persist);
Alpine.plugin(focus);
Alpine.start();

[SimoTod]

You need to add more info and steps to reproduce it to the ticket otherwise is impossible to know what's going on.

The version of Alpine and $persist.
Your bundling process.
Etc

The cannot redefine issue is sometimes an indicator that you are starting Alpine twice but this may or may not be true in your case.

[ekwoka]

It looks like this is vite with HMR.

You can't really do HMR with the Alpine build, as there isn't a way to (currently) throw away an actively running stance of Alpine.

Vite is trying to run the persist plugin twice.

You can prevent the errors by checking if the properties already exist on Alpine before adding the plugin and similarly check that Alpine hasn't already run before running it again.

I think you can also use @refresh reload as a comment in that file to make the browser reload instead of doing HMR when it might want to.

That's all vite stuff for dev only.

So the error itself is an incompatibility between how Alpine in implemented and vites HMR system.

[saulharov]

Maybe this will work for anyone that has this problem livewire/livewire#6608 (comment), it worked for me.

[Paperweb]

Thanks !
In my case, i had implemented {{ livewire:scripts }} in the head tag, so adding the Alpine script tags created this conflict.
I didn't know the persist plugin was shipped with livewire.

[ekwoka]

All of the core plugins are.