The mix manifest does not exist laravel как исправить

• Laravel Mix Version: 1.6.2
• Node Version : 8.4.0
• NPM Version : 5.3.0
• OS: Ubuntu 16
• Laravel version : 5.4

Description:

I’m trying to install Laravel in a sub-directory, keeping security in mind, my directory structure is as follows

/var/www/laravel/
/var/www/html/demo/

(demo folder is where i prefer to be called as public folder. and things works like a charm except this mix issue.)

After i run npm run dev it creates mix-manifest.json in /var/www/html/demo/ directory along with css and js directories with compiled files.

in my views/auth/layout.blade.php , i have called the versioned asset like this.

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

And when i reload the page, it says

The Mix manifest does not exist.
in helpers.php (line 548)
at mix('/css/app.css')

in my /var/www/html/demo/ folder, the manifest exists.

{
    "/js/app.js": "/js/app.js?id=62141ada8b6feb788550",
    "/css/app.css": "/css/app.css?id=26d13f158c3bade2b2d3",
}

and here is my webpack.mix.js file contents

let mix = require('laravel-mix');
let path = require('path');
mix.setPublicPath(`..${path.sep}html/demo/`);
mix.js('resources/assets/js/app.js', 'js')
	.sass('resources/assets/sass/app.scss', 'css').version();

• I can call the css file directly, (<link href="{{ asset('css/app.css') }}" rel="stylesheet">). It works, but i prefer to call with mix versioning.
• I can call the css file <link href="{{ asset('css/app.css') }}" rel="stylesheet">. It works too. But not with mix.
• I have tried settings the mix.setResourceRoot('../html/demo/'); and it didnt help.
• I have tried https://stackoverflow.com/a/45154015 but it doesn’t help either (<link rel="stylesheet" href="{{ mix('css/app.css', '../html/demo') }}">)

Steps To Reproduce:

Install Laravel outside root. (/var/www/laravel)
Assume example.com as the server.
Create sub directory as example.com/demo/ (/var/www/html/demo)
Move Files in /var/www/laravel/public folder to /var/www/html/demo

Change paths in demo/index.php

require __DIR__.'../../../laravel/bootstrap/autoload.php';
$app = require_once __DIR__.'../../../laravel/bootstrap/app.php';

Install packages with npm
"laravel-mix": "^1.6.2"

Webpack.mix.js content.

let path = require('path');
mix.setPublicPath(`..${path.sep}html/demo/`);
mix.js('resources/assets/js/app.js', 'js')
	.sass('resources/assets/sass/app.scss', 'css').version();	

run npm dev

It should compile files into /var/www/html/demo folder and create mix-manifest.json file with above mentioned content.

Access example.com/demo/

It should produce the error.

Please help fix this. Thank you!

In this article, we will see the mix manifest does not exist in laravel 8 and laravel 9. We will solve the mix manifest that does not exist in laravel. Laravel mix helper by default looks for manifest-json file. So, if your file is in any other directory or this file doesn’t exist then you will see the mix manifest does not exist error.

Laravel Mix, a package developed by Laracasts creator Jeffrey Way, provides a fluent API for defining webpack build steps for your Laravel application using several common CSS and JavaScript pre-processors. The mix is a thin layer on top of webpack for the rest of us. It exposes a simple, fluent API for dynamically constructing your webpack configuration.

So, let’s see the mix manifest does not exist in laravel 8 and laravel 9.

Solution 1:

Do not use mix in your blade files and you can change

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

To

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

Solution 2:

The mix() helper function default looks for the manifest-json file in /public/manifest-json.js. So, if you can store files in any other file directory then it will show the error. The manifest-json file is stored in the public/app/manifest-json.js, then for a file located in public/app/css/app.css.

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

The mix() helper function allows the second parameter to specify the manifest file directory name.

Read Also: How To Convert Laravel Query To SQL Query

Solution 3:

In localhost, it works fine but if you can deploy it on the server you can get the same error.

If you don’t have access to the root or server. You can edit the AppProvidersAppServiceProvider file and add the following code to the boot() method.

$this->app->bind('path.public', function() {
   return base_path().'/../public_html';
});

Solution 4:

If you have server or root access then you can install the MIX package using the below NPM command.

npm install

npm run dev

OR

npm run production

You might also like:

• Read Also: Laravel 9 Foreach Loop Variable Example
• Read Also: 500 Internal Server Error In Laravel 9 AJAX
• Read Also: How To Fix cURL Error 60 SSL Certificate Problem
• Read Also: How To Solve The Page Expired 419 Error In Laravel

Fancy a SPA in laravel? Yes, we all do! So here is the quick and easy way to get the wonder Vue.js sparking into life in laravel 8.

First a foremost I’m going assume that Laravel is installed and that you have a fresh project ready to go. If you haven’t head over to https://laravel.com/docs/8.x/installation and follow the guide there to set up a new project.

Set up Laravel

Ok so first we are going to change up the web.php routes file, head to routes/wep.php, and replace the content with:

Route::get('/{any}', 'AppHttpControllersPagesController@index')->where('any', '.*');

What we are saying here is that we are happy for anything to come after the / in the URL.

Next, pop on a terminal and create the PagesController.

PHP artisan make:controller PagesController

When that has fired into the app/http/controllers folder open in up and between the two curly brackets add:

//
    public function index()
    {
        return view('welcome');
    }

This will just return the welcome view that’s in our resources/views folder, so let’s head there and make that look good. First, delete everything in Welcome.blade.php and paste in the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;600&display=swap" rel="stylesheet">
    <script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer>
    </script>
    <link rel="stylesheet" href="{{ mix('css/app.css') }}" />

    <title>{{env('APP_NAME')}}</title>
</head>
<body>
    <div id="app">
        <app></app>
    </div>

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

That sets our app up and gives us a nice place to insert our vue.js components.

So it’s Vue time!

In the terminal run

npm install
npm install vue
npm install vue-template-compiler vue-loader@^15.9.5 --save-dev --legacy-peer-deps

Now we have vue.js and all its glory installed head over to the resources/js folder and create a folder called views, in there pop a new vue.js file called app.vue and add the following code

<template>
  <div>
    {{message}}
  </div>
</template>
<script>
const default_layout = "default";


export default {
  computed: {},
  data() {
      return {
          message:'Hello World'
      }
  }
};
</script>

That’s our entry point vue.js component and we just need to tell vue.js to load it and we are done.

So lets head to app.js in our js folder and replace the code in there with the following

import Vue from 'vue'

//Main pages
import App from './views/app.vue'


const app = new Vue({
    el: '#app',
    components: { App }
});

What we do here is import vue.js from our node modules folder, import the component we just made, create a new vue.js instance, and mount it to the id of the app we added in our Welcome.blade.php file.

We now need to update our webpack.mix.js file

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

If you run

npm run dev
PHP artisan serve

from the terminal, you can fire in and get the wonderful hello world and you are all set up and ready to go!

Any issues with this or wanna ask a question please leave a comment below.

I also created a video of the process! Yes I had to update the article after doing it but you can see my process