Why can't I run 'npm run dev' after Taylor updated Laravel with Vite?

@Snapey It has been always localhost:3000 by default, I didn't change anything it's only after Taylor Otwell announced that Laravel new projects will use Vite and it stopped working.

So 'npm run dev' stopped working?

@MooseSaid looks to be working in your screenshot

were your assets compiled?

do you have another webserver running on port 3000

when you try and browse to localhost:3000 is vite still running?

@Snapey no assets gets compiled and nothing is running on another prot. Actually any laravel project that I have works fine and I can run npm run dev normally without issues. It really drives me crazy I mean without changing nothing if i Install a previous version everything works fine.

@MooseSaid so, your assets are compiled, the only problem is you don't have a running webserver?

@Snapey no nothing works, assets not compiled.

When I run npm run watch it shows me the first screenshot and none of them works and before Vite this isn't supposed to happen! Npm run dev should only compile my assets and that's it. And after that I would run php artisan serve and that gives me my working server but not assets are not compiled and npm run dev gets me this weird response in the first screenshot.

@folium Be aware that vite does not output files in "dev" mode. It runs a server that serves the needed files, and injects the css/js into the page.

@MohamedTammam not working as well, the second picture shows the response I get

@Sinnbeck This is a brand new laravel app just installed even without breeze or jetstream, I installed it via composer then I ran npm install. when I run npm run dev I get this:

Opening http://localhost:3000/ gets me this:

and opening http://localhost gets me this:

Here is my package.json file

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "axios": "^0.25",
        "laravel-vite-plugin": "^0.2.1",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vite": "^2.9.11"
    }
}

here is my vite.config.js file

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

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

@Sinnbeck Running php artisan serve opens my project normally but without any compiling.

@MooseSaid You need both. npm run dev only runs a webserver for compiling your css/js.

@Sinnbeck This is what I get in the console when running npm run dev and open localhost:300/

@Sinnbeck So I need to run npm run dev and php artisan serve? is it like npm run watch previously? keeps an eye on any changes and compiling your assets while working?

@MooseSaid Yes. Its not a website you can use for anything yourself. It is just sites that vite uses. You can see the content here: http://127.0.0.1:3000/resources/css/app.css

But like I said, start php artisan serve as well, and enter that page. Now change some js/css and reload and see if it works.

And be aware that you need a postcss config file if you are using tailwind

https://laravel.com/docs/9.x/vite#working-with-stylesheets

@indexed_dk And what error are you gettng?

@Sinnbeck Just a 404: https://twitter.com/Nempiri/status/1542033503180701697

@indexed_dk Yeah you cannot see the root. You can only see the "endpoints". For example: http://127.0.0.1:3000/resources/css/app.css

Be aware the it will show the uncompiled version. The compiled version is still used on the page.

What I was talking about, is if you get an error in the browser console, when you are on the page.

Maybe consider making your own thread, so @moosesaid dont get an email for each time we reply to each other.

@folium But he wants? It the new standard included in Laravel

@indexed_dk it seems like he wan't to get rid of this errors and try old one if in case that's why i attched this reply here.

@folium Seems that it might be working now :)

I will happily help others get theirs working as well, but I suggest creating new threads, so I can focus on one issue at a time