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

Answer 3

Had the same issue, but none of the mentioned solutions worked for me. Instead I saw an issue with the <script> src's in the head-section of the rendered html.

screenshot of script src's buggy

Added in vite.config.js the following code which solved the issue.

server: {
    hmr: {
        host: 'localhost',
    },
}

Edit: The issue was reported in laravel's vite-plugin repo and it will be fixed with this PR

Answer 4

I was having the same issue, I did the following and it finally worked!

I did:

• Upgraded my Laravel Project to Latest (v9.19.0). Infact i upgraded all my packages to latest one too.
• Remove the node_modules and install the dependency using npm install
• Make sure you follow the upgrade guides properly.
• Run the server using php artisan serve
• And run the dev server using npm run dev

If you done properly, it should start the dev server and all your javascript code should compile. (If it succeed, you will see the desired output.)

I fixed the issue in the above steps.

Answer 5

Vite needs an updated node version.

You can download the latest node version then run npm install and npm run dev

To create the server you can use php artisan serve

Answer 6

If you are using laragon as a local deployment you can set the --host flag to the virtual host url of the app ,it worked for me

Answer 7

Try:

.env :

APP_URL=http://localhost:8000

welcome.blade.php :

<head>

<title>my project</title>

@vite(['/resources/js/app.js', '/resources/css/app.css'])