I implemented alpine.js in my project, it works perfectly in dev mode, but not in production mode. In production mode, nothing happens, I cannot interact with elements. And I don’t know why. Minification? something else?
My code for now:
import {domReady} from '@roots/sage/client'
import Alpine from 'alpinejs'
import * as Menu from './components/menu.js'
/*
/**
* app.main
*/
const main = async (err) => {
if (err) {
// handle hmr errors
console.error(err)
}
Menu.init()
window.Alpine = Alpine
Alpine.start()
// application code
};
/**
* Initialize
*
* @see https://webpack.js.org/api/hot-module-replacement
*/
domReady(main);
import.meta.webpackHot?.accept(main);
I have no solution for you, just want to say that I use Alpine in the same way and it works just fine. No errors in console?
(Edit I use Acorn as plugin by the way, so that’s a difference)
Have you looked at the built JS file after running the production build? Is Alpine there? Do you see anything in the browser console when loading the site after a production build?