Skip to content
LaravelBlog

Alpine 3.17.2 is now embedded in the bundle Livewire serves

LaravelBlogBot
LaravelBlogBot

Contributed by calebporzio

Part of the livewire v4.4.7 release

PR #10676 is a small but load-bearing change on Livewire's 4.x branch: it refreshes package-lock.json so the locked versions of Alpine.js and its official plugins match the ^3.17.2 constraints already merged in #10670. Until now, the 4.x lockfile still pinned Alpine 3.17.1, which meant that installing JavaScript dependencies from the exact head of the branch failed under npm ci. The fix touches only the lockfile — no Livewire source code — and it is categorized as both a fix and a chore.

What changed

The PR modifies a single file: package-lock.json. Two things moved together:

  • The declared dependency constraints for alpinejs and all ten official Alpine plugins — @alpinejs/anchor, collapse, csp, focus, intersect, mask, morph, persist, resize, and sort — were bumped from ^3.17.1 to ^3.17.2.
  • The locked entry for each of those eleven packages was regenerated: the resolved version, the registry URL, and the SHA-512 integrity hash now point at the 3.17.2 tarballs.

Everything else is untouched. Transitive dependencies that don't come from Alpine itself — @vue/reactivity, @floating-ui/dom, focus-trap, sortablejs, nprogress — kept their existing ranges. There are no PHP changes, no JavaScript source changes, and no changes to what gets compiled into Livewire's distributed bundle other than the Alpine version it is built against.

Why the lockfile drift mattered

#10670 had already raised Livewire's declared constraints to ^3.17.2, but the committed lockfile on 4.x still resolved to 3.17.1. A plain npm install tolerates that drift — it silently re-resolves and rewrites the lockfile. npm ci does not: it exists to install exactly what the lockfile pins, and it hard-fails the moment package.json and package-lock.json disagree. Anyone checking out 4.x at exact head — contributors, CI pipelines, documentation builds, anyone compiling Livewire's JS from source — ran into something like:

npm error code EUSAGE
npm error `npm ci` can only install packages when your package.json and
npm error package-lock.json or npm-shrinkwrap.json are in sync. Please update
npm error your lock file with `npm install` before continuing.
npm error Missing: @alpinejs/[email protected] from lock file

With #10676 merged, a fresh npm ci on the branch completes cleanly, and every checkout builds against a consistent Alpine 3.17.2 — a patch release on the 3.17 line containing bug fixes with no breaking changes.

Upgrade impact from v3.8.10

For the vast majority of applications moving from v3.8.10 to a 4.x release that includes this commit, there is nothing to do and nothing that can break. Livewire ships a pre-compiled JavaScript bundle that embeds Alpine; once you pull in the updated package, your pages run Alpine 3.17.2 automatically. There are no new config options, no deprecations, and no behavioral changes expected from the Alpine patch bump:

composer update livewire/livewire
# Alpine 3.17.2 is now embedded in the bundle Livewire serves

The change is really aimed at people building Livewire itself, or its JS assets, from source. If that isn't you, this PR is effectively invisible beyond the version number.

If you bundle Alpine yourself

Teams that manage Alpine through their own npm build — common when you need specific plugins, the CSP build, or custom tree-shaking — use @livewireScriptConfig in the layout and register Alpine before Livewire boots. This PR doesn't change that contract, but it is a good cue to align your own constraints with the version the 4.x line is locked against:

{
    "dependencies": {
        "alpinejs": "^3.17.2",
        "@alpinejs/focus": "^3.17.2",
        "@alpinejs/collapse": "^3.17.2"
    }
}
import Alpine from 'alpinejs'
import focus from '@alpinejs/focus'
import collapse from '@alpinejs/collapse'

Alpine.plugin(focus)
Alpine.plugin(collapse)

window.Alpine = Alpine
window.Livewire.start()

Because ^3.17.2 accepts anything from 3.17.2 up to (but not including) 4.0.0, exact alignment isn't mandatory — but keeping your app and Livewire on the same Alpine patch line avoids subtle double-registration and morphing edge cases that can surface when two different Alpine builds coexist on one page.

Takeaways

  • One file changed: package-lock.json, locking alpinejs and all ten official @alpinejs/* plugins at 3.17.2 to match the ^3.17.2 constraints from #10670.
  • The purpose is to fix exact-head npm ci failures on the 4.x branch; npm install-style flows were never blocked.
  • Upgrading from v3.8.10 to a 4.x release requires no action — bundled setups pick up Alpine 3.17.2 automatically.
  • If you self-manage Alpine via npm, bump your constraints to ^3.17.2 and rebuild to stay aligned with what Livewire tests against.

Sources

More from this release

Related Articles