Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

dev-idkwhoami's avatar

Vite Build breaks AlpineJS code

First some quick infos for the setup.

package.json

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "watch": "vite build --watch"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.14",
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.5",
        "postcss": "^8.4.23",
        "postcss-import": "^15.1.0",
        "tailwindcss": "^3.3.2",
        "sass": "^1.62.1",
        "vite": "^4.0.0"
    },
    "dependencies": {
        "@tailwindcss/forms": "^0.5.3",
        "alpinejs": "^3.12.1"
    }
}

vite.config.js

import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/scss/app.scss', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    resolve: {
        alias: [{
            // this is required for the SCSS modules
            find: /^~(.*)$/, replacement: '(DOLLARSIGN)1',
        },],
    },

});

bootstrap.js

.
.
.
/**
 * AlpineJS Integration
 */
import Alpine from 'alpinejs';

window.Alpine = Alpine;
Alpine.start();

I use npm run build to compile the assets. I have a div in my view with x-data="{ mobileNavVisible: false }. But upon loading the page i get the following error:

Uncaught TypeError: {(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)}[n] is not a function

x-init works but all x-on events wont trigger because of this.

As i understand it means that im missing a semicolon. The Devtools even show where. The problem is that i obviously can't add that there since that JS file is compiled by Vite and that part of the code is poart of AlpineJS anyway.

Is this a bug or did i miss configure something ?

0 likes
1 reply
dev-idkwhoami's avatar
dev-idkwhoami
OP
Best Answer
Level 10

So after a hour of pain i found the problem.

In my view i used AlpineJS's x-transition it seems either Copilot or PHPStorm's Autocomplete tripped me up and added an extra x-transition so it looked like this x-transition:x-transition:leave-end="opacity-0".

I guess Alpine tried to parse that and failed miserably. Catching that error would have made this error as simple as finding the duplicate.

Anyway hope this helps anybody else ^^

Please or to participate in this conversation.