The Wire · Showcase
PHOENIX FLIPS TO ESM BY DEFAULT, LIVE VIEW PATCHES DIRECTIVE BUG
By RepoJournal · Filed · About Elixir & Phoenix
Phoenix's new project installer now outputs ESM modules for app.js, bringing tree shaking and code splitting to every new codebase.
The Phoenix team is updating mix phx.new to configure esbuild for ESM output by default [1], aligning with how modern bundlers like Vite work. ESM modules enable tree shaking, code splitting, and strict mode, which cuts bundle sizes and catches coding errors earlier. This is a breaking change for new projects only, but it's the right move for 2025. Meanwhile, LiveView 1.2.4 shipped with a critical fix for colocated components [2]: directives were getting dropped when a single component used both ColocatedCSS and ColocatedHook together. If you're using scoped CSS with JS hooks in the same LiveView component, this patch fixes the attribute loss. The release also restores missing img attributes on live_img_preview and quiets false warnings about form recovery [2].
Action items
- → Upgrade phoenix_live_view to 1.2.4 immediately if using colocated CSS and JS together phoenixframework/phoenix_live_view [immediate]
- → Review new Phoenix projects for ESM output config once v1.9.0 ships phoenixframework/phoenix [plan]
References
- [1] Bundle app.js as ESM module for new projects (#6548) phoenixframework/phoenix
- [2] v1.2.4 ↗ phoenixframework/phoenix_live_view
FAQ
- What changed in Elixir & Phoenix on June 30, 2026?
- Phoenix's new project installer now outputs ESM modules for app.js, bringing tree shaking and code splitting to every new codebase.
- What should Elixir & Phoenix teams do about it?
- Upgrade phoenix_live_view to 1.2.4 immediately if using colocated CSS and JS together • Review new Phoenix projects for ESM output config once v1.9.0 ships
- Which Elixir & Phoenix repositories shipped on June 30, 2026?
- phoenixframework/phoenix, phoenixframework/phoenix_live_view