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

Eloïse's avatar

Vite bundle app.css but not app.js

Hello I'm struggling with Vite on a fresh laravel 9 project, I followed the documentation : I've added my resources/js/app.js in vite.config.js :

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        {
            name: 'blade',
            handleHotUpdate({ file, server }) {
                if (file.endsWith('.blade.php')) {
                    server.ws.send({
                        type: 'full-reload',
                        path: '*',
                    });
                }
            },
        }
    ],
});

and added

@vite('resources/css/app.css', 'resources/js/app.js')

in the blade file, unfortunately app.js is not avalaible, here is my resources/js/app.js

import './bootstrap';
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();

I'm working on a mamp pro dev server with apache, npm 9.19.0, node 18.10. Naturally I made a npm run dev but I can't use Alpine, I don't see where is the problem. Thanks for your help. I noticed that in the console :


WebSocket connection to 'wss://localhost:5173/' failed:
0 likes
5 replies
Eloïse's avatar

Vite plugin seems not to be reliable I made a fallback to mix which is more reliable, why always overcomplicating/changing things that worked ?...

Lumethys's avatar

@Eloïse jquery and plain php made most of the web, why using MVC?

MVC multi-page worked, why create SPA with JS framework?

SPA pairing with API worked, why create InertiaJS?

REST Api worked, why create GraphQL?

You see, what truly important is evolution, if you just stop when "it is working", you will never progress forward, forever stagnate at the same place.

Everything we create is just an improvement over something.

Sinnbeck's avatar
Sinnbeck
Best Answer
Level 102

Vite takes an array, as the second argument is the path (not needed)

@vite(['resources/css/app.css', 'resources/js/app.js'])
1 like
jmacdiarmid's avatar

@Sinnbeck I was just running into this issue. Something so simple is easily overlooked. Forest-tree situation. :) Spent most of yesterday trying to fix this. I give my appreciation to you for pointing this out.

1 like

Please or to participate in this conversation.