Unable to locate file in Vite manifest: logo.png

Question

So I'm encountering this issue and I can't solve it so I thought post it here.

I found similar issues but those are about .css files and I'm dealing with images.

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

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

3. Larave & Vite - Vite manifest missing odd files

Here's my problem.

I ran npm run build and it was successful, the files are inside public/build/assets/ folder and the manifest.json is inside the public/build/ but I'm getting "Unable to locate file in Vite manifest: logo.png.

- public
  - build
    - assets
      - logo-7b466471.png
    - resources
      - index.html
    - manifest.json

The manifest.json has:

"resources/images/logo.png": {
  "file": "assets/logo-7b466471.png",
  "src": "resources/images/logo.png"
},

Here's how I use the image inside my blade.php file:

<img src="{{ Vite::asset('logo.png') }}">

In my app.js I have this at the very top:

import.meta.glob(["../images/**", "../fonts/**"]);

I have tried the solutions mention in the post.

EDIT:

I'm using the latest Laravel Framework: "laravel/framework": "^10.20.0"

My package.json:

"@vitejs/plugin-vue": "^4.3.3",
"laravel-vite-plugin": "^0.8.0",
"vite": "^4.4.9",

Answer 1

Seems like no one has encountered this before.

I've solved it by doing the following:

1. Make sure you're using Node 18.17 or higher.
2. If you already run npm install delete the node_modules folder.
3. Run npm install again.
4. Run npm run build.
5. In your app\Providers\AppServiceProvider.php add this line of code in the boot method.

use Illuminate\Support\Facades\Vite;

public function boot(): void
{
    Vite::macro('image', fn (string $asset) => $this->asset("resources/images/{$asset}"));
}

6. In your blade file use the the Vite macro like this:

<img src="{{ Vite::image('logo.png') }}" />

7. Lastly, in your vite.config.js add this:

export default defineConfig({
  build: {
    chunkSizeWarningLimit: 3072, // 3MB
    assetsInlineLimit: 0,
  },
  plugins: [
    // ...
  ],
});