CODEWITHSUNDEEP
formsauthenticationmanifestvitelaravel-9
ST Tech
ST Tech

Reputation: 141

Unable to locate file in Vite manifest: resources/sass/app.scss

I have installed laravel 9 and livewire. When i try to open login or registraration page from top corner it's showing this error enter image description here

Can you tell me something how can i fix this one

Upvotes: 14

Views: 53220

Answers (7)

Damian Chudobiński
Damian Chudobiński

Reputation: 559

For me was: When i used in view

@vite(['resources/scss/style.scss'])

I had to add in vite.config.js corresponding path

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig(
{
    plugins: [
        laravel({
            input: [
                'resources/scss/style.scss',
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

====================== EDIT ======================

When i setted up hot file and build directory to diffrent then basic, i had to also change way i provide required paths for scss which should be included (note {{ }} echoing in blade template with html escaping)

{{
    Vite::useHotFile('frontend.hot')
    ->useBuildDirectory('frontend')
    ->withEntryPoints(['resources/assets/scss/additional.scss'])
}}

Note that npm run dev is just for local usage/testing for deployment you should still use npm run build

Upvotes: 23

barna
barna

Reputation: 171

The error happens because you have not built and run your frontend code correctly. While you will not get this error running a default Laravel installation, if you add an extra package like Livewire or Jetstream your JavaScript and CSS dependencies will change.

Your vite.config.js file will probably have a line for the file that matches the error you get, such as input: ['resources/css/app.css', 'resources/js/app.js'].

What to do

download and build the JavaScript code. Make sure that npm is installed on your computer (if it's not, go to your ubuntu terminal and run

npm install get into your editor(vscode) terminal and again run the same command)

THEN

in the terminal of your project folder, run:

npm install
npm run dev

The commands above will install JavaScript modules and make them available to the browser. It would be best if you still ran the PHP server to browse your project (personally I did that in another window terminal):

php artisan serve

These commands are useful when running in development so code changes are available to the browser by the hot-reload servers. However, when running in production, rather run the command below to bundle all your frontend code. (I ran this command in a separate terminal):

npm build

This command runs a vite build that bundles your assets into the public/build folder. There is no need for the Vite or Artisan dev server because your production machine will make everything available to the browser through the Apache web server.

You can also read this as a reference also, understand how manifest not found can be solved

Upvotes: 0

João
João

Reputation: 761

It seems that nobody here is trying to explain really what happens.
When you use Laravel + Vite there's a entry point view that you use the vite directive:

your ".blade.php" file:

@vite(['resources/js/app.ts'])
  • If the Vite server is off (you're not running npm run dev), it'll look into the manifest file that is located in public/build/manifest.json
  • This file contains a map with the build for production files. The key (resources/js/app.ts) is pointing to the build files.
  • To generate this file you have to run npm run build

manifest.json file

{
  "resources/js/app.ts": {
    "css": [
      "assets/app-R6EJiZJt.css"
    ],
    "file": "assets/app-VmbBAHU3.js",
    "isEntry": true,
    "src": "resources/js/app.ts"
  }
}
  • Now, Laravel Blade's directive @vite is retrieving the files from your build folder if you're NOT running vite server (which means, you're in production)
  • If you're running the vite server (npm run dev), the @vite directive will get your development files from your resources folder or wherever you place it.

Conclusion

The @vite(['resources/js/app.ts']) directive retrieve the development files if your Vite server is on (npm run dev).
If not, it'll look into the manifest.json to find the build files. If it didn't find the key in the manifest.json, it will throw the error Unable to locate file in Vite manifest...

Extra

Be aware of the imported components on Vite side, if you do this somewhere in your app:

const pages = import.meta.glob('./Pages/**/*.vue')

You need to make sure the page you're requesting is included on it, which means, Vite will only map to the manifest.json components that are includes in the glob pattern above.

A common mistake is:

  • On your Laravel blade file you request a specific component (ex.: Inertia + Laravel):
@vite(['resources/js/app.ts', "resources/js/Pages/$page['component'].vue"])
  • But in your frontend, you're not including (in the glob pattern) the given component requested in the @vite directive (resources/js/Pages/$page['component'].vue)
  • It will throw the Unable to locate file... error, because the file wasn't mapped to the manifest.json, which means, it's not included in the pattern import.meta.glob('./Pages/**/*.vue')

As the Damian Chudobiński (above answer) stated, you can force Vite to map a given file in the input attribute:

export default defineConfig(
{
    plugins: [
        laravel({
            input: [
                'resources/scss/style.scss',
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

Upvotes: 11

JoyBoy
JoyBoy

Reputation: 71

just don’t add any thing you need to do some edit and it will work ,so you need to go to app.blade.php in layouts and you will find

@vite(["resources/sass/app.scss", "resources/js/app.js"]) on line 18

replace it with :

@vite(["resources/css/app.css", "resources/js/app.js"])

and your project should be working fine

Upvotes: 1

Murtaza Nawaz
Murtaza Nawaz

Reputation: 35

Try this.

npm update

Then open new terminal and run

npm run dev

Finally open a new terminal and run

php artisan serve

Upvotes: 0

Tom Hakemann
Tom Hakemann

Reputation: 357

If you are working with css and you're getting the same error just with css after npm run build:

Unable to locate file in Vite manifest: resources/css/app.css.

In my case i had to change the vite.config.js from

laravel({
    input: [
        'resources/scss/app.scss',
        'resources/js/app.js',
    ],
    refresh: true,
})

to

laravel({
    input: [
        'resources/css/app.css',
        'resources/js/app.js',
    ],
    refresh: true,
})

to make it work.

Upvotes: 3

AndradeL
AndradeL

Reputation: 74

Please try to run in terminal:

npm run dev

If that doesn't resolve the issue:

Then start your scss/sass (by whatever way you do it)

 sass --watch resources/sass/:resources/css/app.css --style compressed

Do you happen to use Vite? if so Goto your root (vite.config.js) and uncomment

'resources/css/app.css',

Then go to your sass/scss and make one edit (for example a spacebar click) and then save that.

If you were using Vite before then re add the line in the root

 'resources/css/app.css'

I hope this works for you. Spamming 'npm run dev' should work but sometimes the old values with strange CSS get pushed to your view and that is why you need to make an edit in your sass/scss file and then save that.

Goodluck!

Upvotes: 1

Related Questions