Vite not compiling assets (npm run build works)

I started a brand new project with Laravel 11 and I'm unable to get Vite working. Build works as expected but dev mode doesn't compile assets, causing app.css to output the @tailwind directives and app.js to import the bootstrap file that causes a 404 error.

I'm using he following config:

Windows 11
PHP 8.2
Node.JS 20

I tried many many things without luck:

Laravel 11 with and without Breeze
Laravel 10 with and without Breeze
Vite using ESM
Tens of changes to vite.config.js

I'm using the files provided by Breeze or Tailwind guide without changes, and serving the Laravel project using artisan serve.

There are more people affected but without solution. Anyone knows what's the problem here?

Thanks!

vaites

2 years ago

Level 1

I tried the exact same steps in Ubuntu 22.04 using PHP 8.1 and Node.JS 20 and all works well. Maybe is only a Windows problem?.

vaites

2 years ago

Level 1

Just found the solution: https://github.com/vitejs/vite/issues/16176

I move all proyects to a Dev Drive and symlinked the old location, and I'm using these path. If I run npm run dev from the real path, all works well.

Hope it helps to anyone with the same problem...

vaites

2 years ago

Best Answer

Level 1

Seems to be a Vite problem: https://github.com/vitejs/vite/issues/16176#issuecomment-2042998785

puklipo

2 years ago

Level 9

npm run dev doesn't create any files. It's working properly.

See "rendered raw html"

php artisan serve

   INFO  Server running on [http://127.0.0.1:8000].

npm run dev

> dev
> vite


  VITE v5.2.8  ready in 177 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

  LARAVEL v11.2.0  plugin v1.0.2

  ➜  APP_URL: http://localhost

When running npm run dev

<script type="module" src="http://127.0.0.1:5173/@vite/client" data-navigate-track="reload"></script><link rel="stylesheet" href="http://127.0.0.1:5173/resources/css/app.css" data-navigate-track="reload" /><script type="module" src="http://127.0.0.1:5173/resources/js/app.js" data-navigate-track="reload"></script>

When not running npm run dev

<link rel="preload" as="style" href="http://127.0.0.1:8000/build/assets/app-***.css"...

if you cannot connect to http://127.0.0.1:5173, an error will occur.

vaites

2 years ago

Level 1

@puklipo I know that npm run dev doesn't create any files. I was trying to explain that if you run it and load http://127.0.0.1:5173/resources/css/app.css it's not compiled (or bundled if you prefer). If Vite returns the file as is is not the expected behavior.

If you run the same command from a non symlinked folder works as expected.

Please or to participate in this conversation.