I have AlpineJS loaded in my Django base.html template, and throughout the app I’m using AlpineJS in my partials. This works locally, but when I deploy I see errors such as:
Alpine Expression Error: app is not defined
Expression: "app"
This is in the <head> of my Django base.html template:
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
And right above the closing </body> tag:
<script src="{% static 'js/main.js' %}"></script>
And in the main.js file:
window.addEventListener('load', function () {
Alpine.data('app', () => ({
modalOpen: false,
mobileNavOpen: false,
toggleModal() {
this.modalOpen = !this.modalOpen
document.body.classList.toggle('overflow-hidden')
},
toggleMobileNav() {
this.mobileNavOpen = !this.mobileNavOpen
},
}))
})
And on my <body> tag:
<body class="front bg-slate-50" x-data="app">
I’m guessing I need a way to check for AlpineJS before the x-data is applied.