I can't run 'npm run dev' since Laravel updated with Vite

Question

Taylor Otwell announced that new Laravel projects now will run with Vite and that Vite is installed by default. I can't seem to be able to run dev environment npm run dev

I installed new laravel project, installed Laravel JetStream with SSR and teams support hit the 'npm install command'.

Every time I run npm run dev it shows this:

And if I open the local link, it shows this:

Why can't I user npm run dev and compile my files?

This is package.json for my brand new laravel app

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build && vite build --ssr"
    },
    "devDependencies": {
        "@inertiajs/inertia": "^0.11.0",
        "@inertiajs/inertia-vue3": "^0.6.0",
        "@inertiajs/progress": "^0.2.7",
        "@inertiajs/server": "^0.1.0",
        "@tailwindcss/forms": "^0.5.2",
        "@tailwindcss/typography": "^0.5.2",
        "@vitejs/plugin-vue": "^2.3.3",
        "@vue/server-renderer": "^3.2.31",
        "autoprefixer": "^10.4.7",
        "axios": "^0.25",
        "laravel-vite-plugin": "^0.2.1",
        "lodash": "^4.17.19",
        "postcss": "^8.4.14",
        "tailwindcss": "^3.1.0",
        "vite": "^2.9.11",
        "vue": "^3.2.31"
    }
}

and if I try hitting 'vite' in the terminal I get this:

Answer 1

If you don't want to use vite but mix instead in your new laravel project, you can just get the usual behavior of npm run dev back with the following changes:

1. Install Laravel Mix (because by the new installation it is not there anymore):

npm install --save-dev laravel-mix

2. Create a webpack.mix.js file, if it is not there, and make sure it has the following content:

const mix = require('laravel-mix');

/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files. 
|
*/

mix.js('resources/js/app.js', 'public/js')
   .postCss('resources/css/app.css', 'public/css', [
       //
]);

3. Update package.json:

"scripts": {
-     "dev": "vite",
-     "build": "vite build"
+     "dev": "npm run development",
+     "development": "mix",
+     "watch": "mix watch",
+     "watch-poll": "mix watch -- --watch-options-poll=1000",
+     "hot": "mix watch --hot",
+     "prod": "npm run production",
+     "production": "mix --production"
}

4. Remove vite helper functions (if they are there):

- import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

  createInertiaApp({
      title: (title) => `${title} - ${appName}`,
-     resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
+     resolve: (name) => require(`./Pages/${name}.vue`),
      setup({ el, app, props, plugin }) {
          return createApp({ render: () => h(app, props) })
              .use(plugin)
              .mixin({ methods: { route } })
              .mount(el);
      },
});

5. Update environment valiables (in .env, VITE_ prefix to MIX_):

- VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
- VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
+ MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
+ MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

6. Remove Vite and the laravel Plugin

npm remove vite laravel-vite-plugin

7. Remove the Vite config file:

rm vite.config.js

8. Remove these paths from .gitignore:

- /public/build
- /storage/ssr

If you created some code already with vite, you must have some more changes in your blade files, check out this article. But if it is a new project, you just good to go.

Answer 2

For anyone experiencing the problem:

With Vite, running npm run dev will only build your frontend and start watching any changes to your code to rebuild automatically.

To actually start your server, you need to run php artisan serve in a separate command window.

Source (See With Laravel section): https://laravel-vite.dev/guide/essentials/development.html#with-laravel