The Error “Unable to locate file in Vite manifest: resources/css/app.css”, is an error that is invoked whenever you are coding in PHP and trying to install laravel and jetstream. Given below is the snippet of the error you might get:
Unable to locate file in Vite manifest: resources/css/app.cssI would like to share with you the steps I took to fix the “Unable to locate file in Vite manifest: resources/css/app.css” in your project file.
Why “Unable to locate file in Vite manifest resources/css/app.css” Error is Seen?
The error, “Unable to locate file in Vite manifest: resources/css/app.css” is seen because of the difference between the previously used and outdated mix and newly used vite, is that vite compiles the css when it runs the server, similar to the way php artisan serve is doing.
So, when you try to run the following command “npm run dev” or “npm run build”, don’t try to stop the process by pressing “ctrl + c” or other methods.
if process is running in backend and you check your browser, you will see that the error Unable to locate file in Vite manifest: resources/css/app.css is solved now.
So Unable to locate file in Vite manifest resources/css/app.css error is not a bug or anything of the kind. The difference between the old mix and vite is that vite, like php artisan serve, builds the CSS as it runs the server.
When you run npm run dev or build command, don’t stop the process with ctrl+c; instead, go to your browser and you’ll notice the error is gone; as long as vite is running in the background, you won’t see error Unable to locate file in Vite manifest resources/css/app.css.
The detailed solution to fix the error “Unable to locate file in Vite manifest: resources/css/app.css”, is given below:
How to fix the error “Unable to locate file in Vite manifest resources/css/app.css” ?
To fix the error, once you install the latest laravel application and implement the jetstream livewire, you will have to run all the commands again like npm install, npm run dev, php artisan serve and PHP artisan migrate. This will fix the error Unable to locate file in Vite manifest resources/css/app.css.
OR
To fix the error, Unable to locate file in Vite manifest: resources/css/app.css, upgrade to Vite 3 version, that is published recently, laravel-vite-plugin v0.5.0 is running Vite 3 version.
If you still face the error you will have to try installing the latest version of laravel.
To fix the error, “Unable to locate file in Vite manifest: resources/css/app.css”, you have to follow the below mentioned steps:
Method 1: Run the following commands
To fix the error, “Unable to locate file in Vite manifest: resources/css/app.css”, once you install the latest version of laravel application and implement the jetstream livewire in your project, run the below mentioned commands:
Step 1: The first command is the following PHP artisan migrate -- to migrate the tables.
Step 2: Then you will have to run npm install
Step 3: Following the above command you will have to run npm run dev
Step 4: Finally run php artisan serve
This should fix the error, “Unable to locate file in Vite manifest: resources/css/app.css”.
Method 2: Installing Latest Laravel Version
To fix the error, “Unable to locate file in Vite manifest: resources/css/app.css”, if the above steps do not work you might have to try to install latest versions of laravel or breeze.
To fix the error Unable to locate file in Vite manifest: resources/css/app.css, upgrade to Vite 3 is live recently, laravel-vite-plugin v0.5.0 is running Vite 3 version.
You will have to run composer require laravel/breeze:1.11.1 instead of just running the following command composer require laravel/breeze
This should fix the error, “Unable to locate file in Vite manifest: resources/css/app.css”.
Conclusion
To fix the error, once you install the latest laravel application and implement the jetstream livewire, you will have to run all the commands again like npm install, npm run dev, php artisan serve and PHP artisan migrate. This will fix the error Unable to locate file in Vite manifest resources/css/app.css.
OR
To fix the error, Unable to locate file in Vite manifest: resources/css/app.css, upgrade to Vite 3 version, that is published recently, laravel-vite-plugin v0.5.0 is running Vite 3 version.