CODEWITHSUNDEEP
laravelcompiler-errorsvite
Mostafa Said
Mostafa Said

Reputation: 1035

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

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:

error

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

localhost

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:

vite error

Upvotes: 20

Views: 58063

Answers (8)

Sakineh Jefarsalehi
Sakineh Jefarsalehi

Reputation: 1

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

Upvotes: -2

MemoryGuy
MemoryGuy

Reputation: 49

Try:

.env :

APP_URL=http://localhost:8000

welcome.blade.php :

<head>

<title>my project</title>

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

Upvotes: 0

Malus Jan
Malus Jan

Reputation: 2148

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

Upvotes: 1

Sven
Sven

Reputation: 111

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

Upvotes: 11

Gabesz Juh&#225;sz
Gabesz Juh&#225;sz

Reputation: 187

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
  1. 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', [
       //
]);
  1. 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"
}
  1. 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);
      },
});
  1. 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}"
  1. Remove Vite and the laravel Plugin
npm remove vite laravel-vite-plugin
  1. Remove the Vite config file:
rm vite.config.js
  1. 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.

Upvotes: 17

Erick Kristofer Umali
Erick Kristofer Umali

Reputation: 152

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

Upvotes: 10

Tahir Ismail
Tahir Ismail

Reputation: 1

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

Upvotes: 0

Anbuselvan Annamalai
Anbuselvan Annamalai

Reputation: 626

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.

Upvotes: 2

Related Questions