vite not recognizing app.js?

I'm using Laravel 10 in a Filament project with vite. I have pretty much the stock vite.config.js file:

import { defineConfig } from 'vite'
import laravel, { refreshPaths } from 'laravel-vite-plugin'

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/css/filament/app/theme.css'
            ],
            refresh: [
                ...refreshPaths,
                'app/Filament/**',
                'app/Forms/Components/**',
                'app/Livewire/**',
                'app/Infolists/Components/**',
                'app/Providers/Filament/**',
                'app/Tables/Columns/**',
            ],
        }),
    ],
})

import { defineConfig } from 'vite'
import laravel, { refreshPaths } from 'laravel-vite-plugin'

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/css/filament/app/theme.css'
            ],
            refresh: [
                ...refreshPaths,
                'app/Filament/**',
                'app/Forms/Components/**',
                'app/Livewire/**',
                'app/Infolists/Components/**',
                'app/Providers/Filament/**',
                'app/Tables/Columns/**',
            ],
        }),
    ],
})

I have this in my blade layout file in the head:

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

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

In my

resources/js/app.js

resources/js/app.js

file I have this:

console.log('test');
import JSConfetti from 'js-confetti';

const jsConfetti = new JSConfetti();
window.jsConfetti = jsConfetti;

console.log('jsConfetti is set', window.jsConfetti);

console.log('test');
import JSConfetti from 'js-confetti';

const jsConfetti = new JSConfetti();
window.jsConfetti = jsConfetti;

console.log('jsConfetti is set', window.jsConfetti);

I've run npm run build, but I don't even get the simple "test" message from the console.log statement in app.js. It almost seems like vite isn't loading the app.js file at all. I should at the very least see the "test" message from app.js, right?

I upgraded the laravel-vite plugin to 1.0.1 and upgraded vite to 5.0.0, but that hasn't resolved it either. I've cleared the cache and hard refreshed. I've verified that jsConfetti is in my node_modules folder.

Also, I see no app.js in my sources in dev tools, which I'm thinking should be in the js folder?

Solution

I have this in my blade layout file in the head:

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

Which layout? Did you override Filaments layout? You should use Filaments methods to add Javascript:
https://filamentphp.com/docs/3.x/support/assets#registering-javascript-files

Assets - Core Concepts - Filament

Jump to solution

Raj Siva-Rajah•1/21/24, 8:39 AM

@Jon Mason Are you sure Filament loads app.js? That's supposed to be where js for your non-Filament pages lives (eg web pages). You wouldn't want to use the same js build for both - things would get bloated. I haven’t tried using it in a panel so maybe someone else can confirm.

I register panel assets using Filament's asset system: https://filamentphp.com/docs/3.x/support/assets#registering-javascript-files.

The layout file isn't used by Filament either. That's just for views outside of Filament.

Assets - Core Concepts - Filament

Solution

Dennis Koch•1/22/24, 6:52 AM

I have this in my blade layout file in the head:

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

Which layout? Did you override Filaments layout? You should use Filaments methods to add Javascript:
https://filamentphp.com/docs/3.x/support/assets#registering-javascript-files

Assets - Core Concepts - Filament

JJon Mason I'm using Laravel 10 in a Filament project with vite. I have pretty much the sto...

Matthew•1/22/24, 9:40 AM

This is because Filament uses Alpine.js and not regular js

Matthew•1/22/24, 9:41 AM

Having just console.log wont work

Matthew•1/22/24, 9:41 AM

https://alpinejs.dev/start-here

Start Here — Alpine.js

MMatthew This is because Filament uses Alpine.js and not regular js

Raj Siva-Rajah•1/22/24, 9:43 AM

JS is JS

Vanilla scripts will work fine if registered.

Raj Siva-Rajah•1/22/24, 11:56 AM

@Dennis Koch Do panels load

resources/js/app.js

resources/js/app.js

at all? I'm pretty sure they don't : https://github.com/search?q=repo%3Afilamentphp%2Ffilament%20resources%2Fjs%2Fapp.js&type=code but just want to confirm I have that right.

Jon MasonOP•1/27/24, 9:41 PM

I somehow never saw this page in the documentation, so thank you for pointing it out..

Jon MasonOP•1/27/24, 9:57 PM

I think I maybe marked this as answered too soon. It's obvious in the documentation how to register an asset like a custom js file or something into filament, but it's basically already looking in the public folder for those assets, so you'd still have to have a build step that would compile your assets into the public folder, and then register them with filament.

This even seems to be what should happen, as the vite.config.js references file. If that file isn't used, why is it referenced, and/or why does it even exist? I'm just not understanding how I can use an external js library, which seems like something that probably a lot of people have done? Maybe I'm just completely misunderstanding how things work, but I feel like I understand the basic concept of the build step and compiling assets.

I've used alpine.js in an app before, albeit to a limited degree, but if I have to use alpine.js and I can't put anything in app.js, do I have to create an alpine component in order to use a javascript library?

Raj Siva-Rajah•1/27/24, 10:01 PM

The command will copy all registered assets from their src location into the public dir. Have a look for that in the docs.

If you want to minify your js before running that command you'll have to use your own build / minification process. I don't bother - your webserver will compress the files before serving them anyway which makes whitespace pretty much irrelevant for vanilla js. If you're building things with a framework you'll need to figure out how to configure an additional input / output in Vite.

resources/js/app.js

resources/js/app.js

is not for your backend Filament admin panel. It's for your frontend (eg. website). If your app is only using Filament panels, just ignore that file.

Raj Siva-Rajah•1/27/24, 10:02 PM

All the info you need is in the docs: https://filamentphp.com/docs/3.x/support/assets

Second paragraph talks about how assets are published into the public folder

Assets - Core Concepts - Filament

Jon MasonOP•1/27/24, 10:31 PM

ok, I got it working, thanks for that. The part I'm still not getting is lazy loading it so it doesn't load on every page. I've registered it in my service provider:

and then I'm gathering that I also need to have it on my div in my blade file:

When I do that, it gives me a reference error. I can see that the library is in my sources in dev tools, so it's still loading. Am I referencing the name of the plugin incorrectly, or am I misunderstanding the docs?