CODEWITHSUNDEEP
laravelvue.jswebpack
Steve
Steve

Reputation: 645

Laravel webpack unable to locate Mix file

Trying to use versioning and i get this error .

Unable to locate Mix file: /core/public/css/app.css. (View: C:\laragon\www\project\core\resources\views\master.blade.php)

My webpack.mix.js file

const mix = require('laravel-mix');


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

   if (mix.inProduction()) {
      mix.version();
  }

header

<link href="{{ mix('/core/public/css/app.css', '/core/public') }}" rel="preload" as="style"
    onload="this.onload=null;this.rel='stylesheet'">
<script src="{{ mix('/core/public/js/manifest.js'), '/core/public'}}"></script>
<script src="{{ mix('/core/public/js/vendor.js'), '/core/public' }}"></script>
<script src="{{ mix('/core/public/js/app.js'), '/core/public' }}"></script>

mix-manifest.json output

{
    "/js/app.js": "/js/app.js?id=170c03d22dcc6f5e5936",
    "/css/app.css": "/css/app.css?id=3306ee8f312fb58dd115",
    "/js/manifest.js": "/js/manifest.js?id=41f053ba9a94d81b39f8",
    "/js/vendor.js": "/js/vendor.js?id=cf78339b219ecdecb320"
}

File structure inside project is

core
└───public
│   │   mix-manifest.json
│   │
│   └───js
│       │   app.js
│       │   manifest.js
│       │   vendor.js
│       |
|       css
|       |   app.css 
|       |
|
|
|
|''' 
└───webpack.mix.js
|...

Pointing to the javascript file like that

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

gives me an error

The Mix manifest does not exist. (View: C:\laragon\www\project\core\resources\views\master.blade.php) (View: C:\laragon\www\project\core\resources\views\master.blade.php)

Trying raw URL instead gives me this error

<script src="/css/app.css"></script>

GET https://project.test/css/app.css net::ERR_ABORTED 404 (Not Found)

The above file is located inside /core/public/css folder and it does not point correct.

Upvotes: 0

Views: 7103

Answers (3)

Hashim Aziz
Hashim Aziz

Reputation: 6062

In my case I was accidentally using the mix() helper to reference a custom CSS file that I wasn't compiling with Laravel Mix. This can be fixed by either adding the file to webpack.mix.js to minify and compile it with the rest of the build files, or by using the asset() helper to reference it statically instead.

Upvotes: 0

Steve
Steve

Reputation: 645

This made it work

 <link href="{{ mix('css/app.css', 'core/public') }}" rel="preload" as="style"
        onload="this.onload=null;this.rel='stylesheet'">
    <script src="{{ mix('js/app.js', 'core/public') }}" defer></script>

To explain, the second parameter points to where the mix-manifest.json file exists.

Upvotes: 1

matiaslauriti
matiaslauriti

Reputation: 8082

Your problem is that you are adding the root folder to your mix path... Do not do that, it is relative to your root/public...

You should have it like this:

<link href="{{ mix('/css/app.css') }}" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'">
<script src="{{ mix('/js/manifest.js') }}"></script>
<script src="{{ mix('/js/vendor.js') }}"></script>
<script src="{{ mix('/js/app.js') }}"></script>

Read more about it here

Upvotes: 0

Related Questions