Uncaught Exception: Unable to locate Mix file

Question

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

Answer 1

You can try to reinstall packages

1. Delete package-lock.json.
2. Delete folder 'node_modules' and run 'npm install' to reinstall all modules.
3. Then run 'npm run watch' or 'npm run production' or ...etc... (build it)

That can help to fix that problem.

Answer 2

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.

Answer 3

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;

Answer 4

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"

Answer 5

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:

• You update your 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();

• Mix compiles and stores the hence generated CSS and JS files within their respective destination folders when you run npm run dev or npm run watch.

laravel-app (Your laravel app root folder)
    \public
        \css
            \app.css
        \js
            \app.js

• When you open the application in your browser with, say Valet, Laravel spits out the following error message:

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.

Solution (TL;DR)

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!

Answer 6

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

Answer 7

Try running npm install and after that build the assets, either npm run dev or npm run watch , depends on what you are using.

Answer 8

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.