Versioning with Mix, manifest does not exist. {but.... it does!)

I was able to get mix working just fine on my Laravel 5.3 build with Windows.

I also had a an issue with my manifest file not being found on my first attempt.

So the issue I was having was in my configuration. I read through the docs carefully because I was having issues and made sure to update my package.json properly.

Also I attempted to do npm prune and then run npm install but this didn't work exactly right for me. So my solution was to manually delete the node_modules folder and then run npm install

Finally you said that your error was 'Unable to locate Mix file:/css/app.css. ' is your webpack.mix.js file configured correctly? Make sure you update the default 'src/css/app.css' to your 'resources/css/app.css' or whatever your trying to mix.

Lastly there is a note in the docs that you need to call mix.js() at least once in your mix file. Are you trying to compile just css without calling .js() at least once?

It is a fresh 5.4 install.

webpack is the following;

let mix = require('laravel-mix').mix;

mix
    .js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css/')
    .version()
;

It is the {{ mix() }} helper function that does not work for me. I can run the npm run ? just fine.

Interesting, I think I read somewhere that someone had a similar issue, but I can't find the link.

Does this compile fine if you remove .version() ?

Perhaps the error is in the versioning right now.

I believe it did, but i moved away from it for now. I don't have the time for it and since 5.4 is not yet released, it is pointless to pursue.

I have just 2 frontend assets to compile so at this point it would be a complete waste of time to try to troubleshoot. Elixir does just fine.

I know this though, yarn will not grab all of the dependencies like npm i does, and npm i is the only command that actually grabs all of the dependencies that mix requires (not npm i --no-bin-links).

Overall i must say it was a really frustrating process. It's not a "It works out of the Box for WIndows" kinda thing.

I do appreciate your insight and attention.

Thanks...

i'm running into this issue now. anyone else? solution?

I just did a fresh install for a new project and everything works perfectly. However, I did have to include a .babelrc file in the project root because for some reason the mix defaults aren't getting injected.

What flavor of error message are you getting?

@ejdelmonico the manifest file doesn't exist, but it does. i also put stuff in public/assets/css, public/assets/js, etc. here's my webpack.mix.js file

mix.webpackConfig({
    output: {
        path: __dirname + "/public/assets"
    }
});

mix.js('resources/assets/js/app.js', 'js/app.js')
   .sass('resources/assets/sass/app.scss','css/app.css')
    .combine([
        './node_modules/jquery-ui-dist/jquery-ui.css',
        './node_modules/jquery-ui-dist/jquery-ui.theme.css'
    ], './public/assets/css/jqueryui.css');

the manifest file was created in public/assets/mix-manifest.json with the following code inside.

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

then i copied the file to public/mix-manifest.json. i got rid of the manifest error but got cannot find assets/css/app.css file error. in blade, i have

<link href="{{ mix('assets/css/app.css') }} rel="stylesheets">

honestly, this node and js stuff is becoming a huge pain. i only play with it coz i don't want to be "left behind". lately, there's been a big attention within laravel development for this so it's kind of hard to ignore but my experience has been horrible :(

temporarily i just removed the mix() and used a regular link to the assets.

A few times I have had to install cross-env to get everything to work. I am not sure why, but when I install it again everything worked. Although, I don't recall it being unable to find the manifest file. Have you changed any of the directory structure?

Oh wait..you changed the output path. I bet Mix is looking for that file in /assets.

I've stepped away from troubleshooting the version() function on my dev. I stopped using homestead because i can do everything else on wamp without using so much of my system resources. I set up postgresql locally and can access it from both homestead and wamp so i can continue to develop the app on both dev envs.

I suspect that the mix() script calls a function or method that has to do with the filesystem and does it in a manner incompatible with windows. I just cant dive into that now. It would be nice to have it work on the development environment so that i can leave it set. But, I have not returned to this so, presently i dont if it works on windows or not.

The rest of the most current release 5.4.8 on package.json, ever since the scripts were prefixed with "node" they work on windows.

Aside from mix() the only issue that remains is during the initial "npm i" we get the Max Listeners memory leak error which is quite frightening to see on the screen but you just ignore it. I read somewhere they were working on the yarn issue, yarn works really well on windows but when i tried it didnt install all of the dependencies.

@ejdelmonico the manifest file is in /public/assets i also copied it manually to /public. when i did that, the error changed from missing manifest to missing app.css file.

@getvma that's interesting. i am having issues on this project and i'm using windows to develop because of MSSQL and driver. i'll try to pull down the repo on my mac and see if i get the same error.

@w1n78 Definitely a problem with the code I think. It can not find the file when you use a different output directory. Seems odd but it could be an issue to file.

After reading the Mix code, I think a bunch of the issues folks are having stems from defining a publicPath other than public. It causes Mix to break down with versioning and url changes. If you are using a different output path, it would seem from reading the code that you must also define the publicPath.

@ejdelmonico here's my new webpack.mix.js file

mix.webpackConfig({
    output: {
        path: "public/assets",
        publicPath: "public/assets/"
    }
});

mix
    .js('resources/assets/js/app.js', 'js/app.js')
    .sass('resources/assets/sass/app.scss','css/app.css')
    .combine([
        './node_modules/jquery-ui-dist/jquery-ui.css',
        './node_modules/jquery-ui-dist/jquery-ui.theme.css'
    ], './public/assets/css/jqueryui.css');

still the same error

Unable to locate Mix file: /assets/css/app.css. Please check your webpack.mix.js output paths and try again.

files exist. i also tried it on my mac same issue. however, the npm run watch command runs as expected whereas in windows, it's hit or miss. the command runs but the css file doesn't change.

@w1n78 Actually, you would need to console.log(publicPath) to check if its correct. After a long review of the code while trying to do a fix for the missing "ES2015" preset defaults, I noticed at least 4 path variables for Mix references. The output path is not necessarily the publicPath. And the project root can most times be determined by checking console.log(path.resolve(this.Paths.rootPath)). It is a young product but I think it will be even better in a few revisions.

you need just to run again this command : npm run dev

I came across this thread as I faced the same issue.

The problem a lot of the times is that the mix()-helper function by default looks for the manifest-json file in /public/manifest-json.js so if you store that file on any other directory level (which it seemed like you did) then it will throw that error.

Let's say the manifest-json file is stored in public/app/manifest-json.js, then for a file located in public/app/css/app.css you would use:

<link rel="stylesheet" href="{{ mix('css/app.css', 'app/') }}">

The mix()-helper function has allows for a second argument, the directory of the manifest file. Just specify it there and it will use the correct manifest file.

The compilation should generate a file mix-manifest.json . Open this file. You may get something like :

{
    "/js//admin.js": "/js//admin.js",
    "/manifest.js": "/manifest.js",
    "/js//vendor.js": "/js//vendor.js"
}

now use the keys of this json file as mix() parameter. For example,

mix("/js//admin.js") 

The output in HTML will be automatically in correct format. I hope everything should work fine.

I am having a very similar issue. I am working on Lumen and for reasons, I have to make my public directory be my /var/www/app instead of /var/www/app/public. like you would in laravel. because of this, i keep running into an endless loop of issues because no matter where i put my manifest file, it will always be one directory wrong. For example if I do

mix.setPublicPath('public');
mix.js('resources/js/app.js', 'public/dist/js/app.js').vue({
        extractStyles: true,
        globalStyles: false
    });```

it will create the correct structure, My manifest in the /public folder (where it actually reads it) and my script in the dist/js folder inside public. The problem is, what my manifest ends up reading is { "/dist/js/app.js": "/dist/js/app.js" }

so when I call it in my view, I get an error that it cant find the file, but if I create a public folder inside my public folder, example /public/public/dist/js/app.js it will read the correct files then, I need to be able to have my manifest file in my root directory, not public, and have lumen read it from there, how do i accomplish this?