Hammie's avatar

Unable to locate Mix file: /js/app.js.

When i'm deploying my site to Laravel Forge, it give me an error saying "Unable to locate Mix file" . locally is fully working...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="manifest" href="/manifest.json" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <noscript>To run this application, JavaScript is required to be enabled.</noscript>
    <meta name="theme-color" content="#FFFFFF" />
    </script>

    <title>Kollapp</title>
</head>
<body>
    <div id="app">
    <app></app>
    </div>

    <script src="{{ mix('/js/app.js') }}"></script>
</body>
</html>

my mix-manifest:

{
    "/js/app.js": "/js/app.js"
}

Webpack.mix.js

const mix = require('laravel-mix');
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')

new SWPrecacheWebpackPlugin({
    cacheId: 'Kollapp',
    filename: 'service-worker-cache.js',
    staticFileGlobs: ['dist/**/*.{js,css}', '/'],
    minify: true,
    stripPrefix: 'dist/',
    dontCacheBustUrlsMatching: /\.\w{6}\./
  })

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js').vue();
0 likes
8 replies
Nakov's avatar

And have you pushed your public/js/app.js file to the repo or you have the directory in your .gitignore file?

Hammie's avatar

This is my .gitignore:

/node_modules
/public/hot
/public/storage
/storage/*.key
/vendor
.env
.env.backup
.phpunit.result.cache
Homestead.json
Homestead.yaml
npm-debug.log
yarn-error.log
Nakov's avatar

Hm, run npm run prod and push the changes.

Nakov's avatar

You can always ssh to your forge instance, and check out if a directory js and a file app.js exists in the public directory of your project, I somehow doubt that it does. Also make sure you clear your browser cache.

ikartik90's avatar

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!

1 like
liaquatali's avatar

Kindly tell me about this error, also my fiole was exist in /css/base/pages/authentication.css

Unable to locate Mix file: /css/base/pages/authentication.css.

Please or to participate in this conversation.