Breeze Install - Have to keep running npm run dev in separate window

@Sinnbeck Thanks for replying I ran npm run build successfully. But, it still gave error on loading login page

Exception PHP 8.1.6 9.21.3 Unable to locate file in Vite manifest: resources/css/app.css.

But, when I run npm run dev, no error. Login works, Dashboard loads. Additionally, if I modify my view (.blade.php), then the UI breaks. Asset files become 404. To resolve, I have to restart both commands (php artisan server) (npm run build) in separate window, then it load correctly.

@shaileshghadge are you on windows?

@Sinnbeck Yes Windows 10 Pro.

@shaileshghadge there seems to be a bug currently, where the manifest file gets the wrong slashes in a path (windows only). Can you show the content if your manifest file?

@Sinnbeck Pl find below content of public/build/manifest.json

{
  "resources/js/app.js": {
    "file": "assets/app.ab93cf8a.js",
    "src": "resources/js/app.js",
    "isEntry": true
  },
  "resources/css\app.css": {
    "file": "assets/app.72cbd360.css",
    "src": "resources/css\app.css"
  }
}

@shaileshghadge Notice this line

"src": "resources/css\\app.css"

The slash after css is the wrong way around. Fix it like this manually

"src": "resources/css/app.css"

And there is a fix on the way. It has been merged buy sadly not release yet https://github.com/vitejs/vite/pull/9353

@Sinnbeck Thanks. So, until official fix is released, I will need to keep updating this everytime I run build.

@shaileshghadge Sadly yes. You can probably also get around it by running your dev environment on WSL2 (linux for windows)

@Sinnbeck Actually since past couple of days, I was trying out WSL2 with Docker Desktop.

And it is not a good option for me.

Enormous memory was getting used. Everything was getting hanged. To fix that, limited the memory, using wsl's config, Then, Hard disk I/O was hitting 100%, which again hanged all applications.

So, returned back to xampp setup.

@shaileshghadge Ouch. Sounds bad :) Hopefully they will release the fix very soon. Run npm update daily and hope it has been fixed

@Denzel Thanks for replying So, to resolve this I need to downgrade Laravel?

@shaileshghadge never

@thinkverse Thanks for replying. I ran npm run build successfully. But, it still gave error on loading login page

Exception PHP 8.1.6 9.21.3 Unable to locate file in Vite manifest: resources/css/app.css.

But, when I run npm run dev, no error. Login works, Dashboard loads. Additionally, if I modify my view (.blade.php), then the UI breaks. Asset files become 404. To resolve, I have to restart both commands (php artisan server) (npm run build) in separate window, then it load correctly.

@Snapey Thanks for replying, I updated package.json as per your link And then closed all, ran php artisan serve and then npm run watch.

PS C:\xampp8\htdocs\Project2\basic> npm run watch
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

> watch
> vite build --watch

vite v3.0.2 building for production...

watching for file changes...

build started...
✓ 59 modules transformed.
public/build/manifest.json             0.23 KiB
public/build/assets/app.72cbd360.css   25.25 KiB / gzip: 4.95 KiB
public/build/assets/app.ab93cf8a.js    129.03 KiB / gzip: 46.77 KiB
built in 16109ms.

Loaded login page in fresh opened inprivate/incognito window, gave error

Exception PHP 8.1.6 9.21.3
Unable to locate file in Vite manifest: resources/css/app.css.

Then, terminated 'watch' and ran npm run dev, then login page loaded without error.

But, if I modify my view (.blade.php), then the UI breaks. Asset files become 404. To resolve, I have to restart both commands (php artisan server) (npm run dev) in separate window, then it loads correctly.

@shaileshghadge Could this be the same issue that @rajoyish had in "unable-to-locate-file-in-vite", where the CSS path generation added a backslash \ instead of a / slash in the manifest.json?

If it's the same issue it's an issue with Vite 3 specifically on Windows. A user has opened an issue on Vite's GitHub. Hopefully, they'll resolve the issue or give Windows users a way to fix it themselves.

@thinkverse For me, it did load properly when I restart both commands (php artisan server) (npm run dev) in separate window. But, consequent changes in *.blade,php used to break the UI.

@shaileshghadge That's how build works, it builds the assets once at the state it's in at that time of the command being run. It's used, as it says in the Laravel docs.

Build and version the assets for production...

artisan serve on the other hand starts a local PHP development server using PHP's built-in web server, which is designed for testing and development. When using build that is what serves your Laravel application and assets found in /public/build.

For hot reloading of assets like Laravel Mix's watch or hot you need to use npm run dev. With that Vite will start a node server for you, and when it notices changes in either your own specified refresh paths or the ones defined by laravel-vite-plugin it'll refresh the browser and rebuild the assets.

Note that dev will only keep the assets rebuilt for the duration the Vite development server is live. When closed the changes made won't be built and persisted in public/build. You'll have to run build yourself before deploying your site or run it in a CI/CD pipeline that's automatically run when you push to production.

@thinkverse Sorry, i wrongly wrote.build, instead of dev in my reply to you...(i have corrected that) For build it didnt work at all. Without workaround, it worked after restarting serve & dev

Currently, with the workaround everything works.

@shaileshghadge Hopefully Vite will release v3.0.4 soon to fix the normalization path for Windows users. 🙂