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

Question

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

Can you tell me something how can i fix this one

Answer 1

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

Answer 2

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,
        }),
    ],
});