Vite manifest not found when registering custom asset and deploying to production

I have a weird issue when trying to deploy to production. I have a custom asset loaded using

FilamentAsset::register([
    Js::make('echo', Vite::asset('resources/js/echo.js')),
]);

FilamentAsset::register([
    Js::make('echo', Vite::asset('resources/js/echo.js')),
]);

However, during composer's post-autoload-dump the following commands are executed

"@php artisan package:discover --ansi",
"@php artisan filament:assets"

"@php artisan package:discover --ansi",
"@php artisan filament:assets"

both of which fail because the Vite manifest hasn't been generated yet. The manifest is generated when I ran npm run build but I can't do that because this fails if I haven't installed the composer dependencies yet. So I'm in this weird catch-22 where the composer step fails because I can't build the Vite manifest, and I can't build the Vite manifest because the composer step fails. Removing the FillamentAsset::register... code solves the issue but it's obviously not a solution so I wonder if I'm missing something. I use Forge/Envoyer for the deployments so most steps are vanilla Envoyer stuff. All of it worked untill I wanted to load a custom asset. The manifest is not commited into the repo BTW. Am I supposed to commit it?

Solution:

you can also load the script with a renderhook instead of 'FilamentAsset'

Jump to solution

17 Replies

ChesterS•3mo ago

filament:upgrade

filament:upgrade

fails too for the same reason Oh FFS... This is because of

import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';

import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';

which doesn't exist until I run composer install but I can't run composer install until I run npm run build ... Fucking great!

awcodes•3mo ago

so, just remove the 'filament:assets' command from your composer scripts, then call it after 'npm run build' in your deploy script.

ChesterS•3mo ago

It's not just the fillament:assets that fails. package:discover and filament:upgrade also fail And by 'fail' I mean I get the same ViteManifestNotFoundException exception So I need to find an alternative way to load an Alpine plugin so I can replace this in my app.js

import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
import AlpineFloatingUI from '@awcodes/alpine-floating-ui'

Alpine.plugin(AlpineFloatingUI)

Livewire.start()

import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
import AlpineFloatingUI from '@awcodes/alpine-floating-ui'

Alpine.plugin(AlpineFloatingUI)

Livewire.start()

awcodes•3mo ago

floating ui is already included with filament though.

ChesterS•3mo ago

Yeah but I think we need it in other non-filament pages and we might need other plugins anyway

awcodes•3mo ago

then load it asset in your non-filament pages with the normal blade '@vite' directive.

ChesterS•3mo ago

Sorry, what do you mean? This is loaded into the custom layout file like this

@livewireScriptConfig
@filamentScripts
@livewire('notifications')
@vite('resources/js/app.js')

@livewireScriptConfig
@filamentScripts
@livewire('notifications')
@vite('resources/js/app.js')

Is there another/better way? (most of it is vanilla stuff from the livewire docs)

awcodes•3mo ago

maybe i'm getting confused, you started out saying it was an issue with 'FilamentAsset::register' for echo.js now its an issue with 'app.js'.

ChesterS•3mo ago

Yeah sorry about that. The issue started when I loaded a custom asset using FilamentAsset::register which needs the (AFAIK) the vite manifest to exist so it can find the asset. However, during deployment, NPM (install + build) are executed after composer install. But I have code in my app.js that needs some files from the vendor folder to work not sure if it makes sense? It's a cyclic dependency of sorts I need both the code in app.js and the ability to load fillament assets, but I can't have both

awcodes•3mo ago

you don't need any of that in your composer scripts

$FORGE_PHP artisan optimize
$FORGE_PHP artisan icons:cache

npm ci
npm run build
rm -rf node_modules

$FORGE_PHP artisan filament:upgrade // (upgrade will run the assets command)
// or
$FORGE_PHP artisan filament:assets

$FORGE_PHP artisan optimize
$FORGE_PHP artisan icons:cache

npm ci
npm run build
rm -rf node_modules

$FORGE_PHP artisan filament:upgrade // (upgrade will run the assets command)
// or
$FORGE_PHP artisan filament:assets

let the server run them instead of composer.

ChesterS•3mo ago

yeah I guess that's the only solution. It'll make local development a bit more annoying since we'll have to remember all those steps when installing/upgrading locally but what can you do...¯\_(ツ)_/¯

Solution

awcodes•3mo ago

you can also load the script with a renderhook instead of 'FilamentAsset'

ChesterS•3mo ago

Hmm didn't think about that. I'll look into it . Are there any drawbacks to it? (eg if I use the PanelsRenderHook::SCRIPTS_AFTER hook)

awcodes•3mo ago

no drawback with Vite, i would probably recommend it.

ChesterS•3mo ago

This seems to have worke, thank you very much 🙇‍♂️ FWIW, this is what I did

FilamentView::registerRenderHook(
    PanelsRenderHook::SCRIPTS_AFTER,
    fn (): string => Blade::render("@vite('resources/js/foobar.js')"),
);

FilamentView::registerRenderHook(
    PanelsRenderHook::SCRIPTS_AFTER,
    fn (): string => Blade::render("@vite('resources/js/foobar.js')"),
);

Nicole•2mo ago

@ChesterS @awcodes I tried this in my app, and it worked on my local but in prod, I received Unable to locate file in Vite manifest: resources/js/plugins/scrollable.js I used this one

ChesterS•2mo ago

Have you added it to your vite.config.js and ran npm run build ?

Gaming

Programming

Vite manifest not found when registering custom asset and deploying to production