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:

Instability

Answer 1

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.

Donohue

Op has created a brand new laravel install, so upgrade guides shouldn't be necessary. – Trichromatic

Same problem for me. Fresh new installation of Laravel Sail. Everything fits the upgrade guide steps. I can see just a blank page, but source code shows it is working, just inertia component is not loaded or something like that. – Besmirch

Answer 2

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.

Lamarre

you saved my project, thank you @Gabesz Juhász – Characharabanc

Excellent answer to rollback to mix, but Vite is actually great and made the default for a reason. I recommend you create a migration branch to make your project work with Vite. – Nightwear

Is there I could do the same if I am using Reactjs instead of Vue? – Diversion

certainly yes, but I haven't tried it yet. – Kliment

Ok, tried this after hours and hours trying to get my brand new Laravel project running. Now instead of getting "sh: 1: vite: not found" I instead get "sh: 1: mix: not found" when I try to run npm run dev. Why can't just Laravel work out of the box??? – Weeper

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

Possum

Answer 4

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

Toffeenosed

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

Schach

on vitejs.dev/guide/#scaffolding-your-first-vite-project page is writing : Vite requires Node.js version 14.18+, 16+… – Duty

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

Tracery

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Teammate

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'])

Cung

Answer 8

1. Change APP_URL=http://localhost:8000 in .env file
2. Use php artisan serve to create server
3. Use npm run dev

Floorwalker