Alpine.$persist

[nfourteen]

I've followed the installations instructions at https://alpinejs.dev/plugins/persist to use the $persist plugin. I've added a log call in Alpine's plugin function:

  // packages/alpinejs/src/plugin.js
  function plugin(callback) {
    console.log(callback)
    callback(alpine_default);
  }

and upon page load, the minified CDN distribution is logged to the console. So I assume the plugin is registering. However, Alpine.$persist calls result in Alpine.$persist is not a function errors.

Are the docs at https://alpinejs.dev/plugins/persist#using-alpine-persist-global outdated? How can I get persist to work with Alpine.store?

[SimoTod]

Likely related to #2465

[SimoTod]

Hard to tell without seeing your code. here is a codepen with a basic working example: https://codepen.io/SimoTod/pen/RwjbBeW
Are you using npm? Have you pulled an old version? Do you call Alpine.start before you add the plugin? It could be that you have imported Alpine twice as well.

[nfourteen]

I was using v3.4.2. Upgrading to v3.8.1 fixed the issue.

[sebaacuna]

In my case I was importing Alpine plugins with defer (<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>).

Removing the defer attribute (so <script src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>) solved the problem.

The Alpine persist installation instructions at https://alpinejs.dev/plugins/persist#custom-key have the defer attribute in there.

After the reading the defer docs in https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script I'm not entirely clear why this would solve the problem.

I'm on Firefox 115.0.3 on MacOS.

[ekwoka]

You need to have the plugin run before the alpine cdn.

So removing defer makes it blocking.

You can have defer on it, but need to have it placed in the document BEFORE the alpine cdn.

[mvolkmann]

I had the script tag for the persist plugin before the script tag for Alpine and both had defer.
I got the error "Alpine.$persist is not a function".
But removing the defer from the script tag for the persist plugin made that error go away.