Reputation: 710
I am trying to run a laravel app in my local system. I have followed the https://gist.github.com/hootlex/da59b91c628a6688ceb1 link. I run the command php artisan serve command, and when I browse it, then produces the error
PHP Fatal error: Uncaught Exception: Unable to locate Mix file: /css/vendor.css. Please check your webpack.mix.js output paths and try again. in /var/www/html/laravel-app/app/helpers.php:439
In the specified line of helpers.php, it has
if (! isset($manifest[$path])) {
throw new Exception(
"Unable to locate Mix file: {$path}. Please check your ".
'webpack.mix.js output paths and try again.'
);
}
public/mix-manifest.json
{
"/mix.js": "/mix.js"
}
I couldn't sort it out. Please help. Thanks
Upvotes: 14
Views: 95836
Reputation: 329
You can try to reinstall packages
That can help to fix that problem.
Upvotes: 4
Reputation: 11
In My case, I change
'debug' => false, to true
in the file app.config under config folder in my project to see log in my browser. Then when I run my project got error above like you. then I change to
'debug' => false again. It works.
Upvotes: 1
Reputation: 582
I changed my webpack.mix.js files and made these changes there and worked. Only define the specific path to public/js/app.js in webpack.mix.js
mix.js(
[
"resources/assets/js/jquery.js",
"resources/assets/js/popper.js",
"resources/js/app.js",
],
"public/js/app.js"
)
.autoload({
jquery: ["jquery", "jQuery", "$", "window.jQuery"],
Popper: ["popper", "Popper", "popper.js"],
popper: ["Popper", "popper.js"],
})
.vue()
.postCss("resources/css/app.css", "public/css", [])
.sass("resources/sass/app.scss", "public/css")
.disableNotifications(); // to disable notifications of building app;
Upvotes: 0
Reputation: 11
In my case, laravel 9 I should have changed the mix-manifest.json file
"/js/application.js": "/js/application.js",
"/js/admin.js": "/js/admin.js",
"/css/application.css": "/css/application.css",
"/css/admin.css":"/css/admin.css"
Upvotes: 1
Reputation: 2815
This happened with me and after spending quite some time and effort, I did manage to figure out what was happening and how to fix it.
Here's what happens:
webpack.mix.js
file with the destination where you wish to publish your compiled JS and CSS files respectively.mix.js('resources/js/app.js', 'public/js').vue();
npm run dev
or npm run watch
.laravel-app (Your laravel app root folder)
\public
\css
\app.css
\js
\app.js
Unable to locate Mix file: /js/app.js
(or)
Unable to locate Mix file: /css/app.css
Something worth noting on the Uncaught Exception screen though, is that Laravel by default attempts to look for the files at localhost:8080
. Implied that Laravel is looking for the files respectively at:
localhost:8080\css\app.css
(and)
localhost:8080\js\app.js
Hence, if your hostname or port is anything other than localhost:8080
, Laravel would not be able to find your files. For example, if you're using Valet, your default URL would become laravel-app.test
where laravel-app is the name of your app's root folder.
But, there's a way to fix this. And it comes directly out to Laravel's documentation.
In order to use a custom mix base URL, you would require to update your config\app.php
file to add the following configuration value for setting the mix URL:
'mix_url' => env('MIX_ASSET_URL', 'localhost'),
With your mix_url
config option set in your app.php
file, you should now be able to manipulate it by adding the MIX_ASSET_URL
key in your .env
file and setting it to blank, so that it points to \public\js\app.js
and \public\css\app.css respectively, within your project directory.
MIX_ASSET_URL=""
That solved it for me. Hope it does it for your too. Lemme know how it goes. Cheers!
Upvotes: 13
Reputation: 99
check the package.json
file for the command to build the scripts and styles, normally you will have by default: npm run dev
. Might happen that you will need to run:
npm rebuild node-sass
npm run dev
or npm run watch
Upvotes: 0
Reputation: 2151
Try running npm install
and after that build the assets, either npm run dev
or npm run watch
, depends on what you are using.
Upvotes: 2
Reputation: 526
The blade file you're loading obviously has mix('/css/vendor.css')
call. You either comment out this line(s) or install npm then build your assets.
Your manifest file doesn't have /css/vendor.css
but if you check your blade files (views
) you'll see you are calling mix('/css/vendor.css')
. So if you find and comment out this line(s) your problem will be solved.
Ideally, mix()
is used for loading assets that were built by webpack. It will then take care of the versioning string for you. How mix can be used is detailed in the documentation. I will refrain myself from discussing that here.
You've built your assets by running npm run dev
or similar commands. And then the manifest file doesn't contain those assets mapping. And your public
directory doesn't have those assets as well. Then it's safe to assume that you can remove those mix
calls from your blade (views
) files.
If you have the assets built in your public
directory then you can load those assets by assets
function.
Lastly, you should know your assets first, before loading them to your site. I get the notion that you don't have any clue where those assets came from, so you shouldn't load them in the first place.
Upvotes: 11