Npm can not run vite build on Laravel 11 project

Question

I created a new, default, Laravel project using composer. The setup is basic and mentioned below. When I run any of the Vite commands (build, dev etc.) I get the following error message :

npm run dev

error when starting dev server:
TypeError: Invalid URL
    at new URL (node:internal/url:806:29)
    at getAdditionalAllowedHosts (file:///Users/hazarcandogabakan/Desktop/projects/unusualspacelanding/node_modules/vite/dist/node/chunks/dep-CjorC8P2.js:59194:29)
    at resolveConfig (file:///Users/hazarcandogabakan/Desktop/projects/unusualspacelanding/node_modules/vite/dist/node/chunks/dep-CjorC8P2.js:66549:29)
    at async _createServer (file:///Users/hazarcandogabakan/Desktop/projects/unusualspacelanding/node_modules/vite/dist/node/chunks/dep-CjorC8P2.js:62901:18)
    at async CAC.<anonymous> (file:///Users/hazarcandogabakan/Desktop/projects/unusualspacelanding/node_modules/vite/dist/node/cli.js:736:20)

Following are the enviroment details: *Consider that I use the same config in another Laravel 11 (Twill CMS) project with same package versions. *

NPM version: v10.9.0;
Node version: v20.18.0;
PHP: 8.2;
Laravel: 11;
in '.env' file, APP_URL=http://127.0.0.1:8000;

This is my package.json:

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "watch": "vite build --watch"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.20",
        "axios": "^1.7.4",
        "concurrently": "^9.0.1",
        "postcss": "^8.4.47",
        "tailwindcss": "^3.4.13",
        "@rollup/plugin-inject": "^5.0.5",
        "laravel-vite-plugin": "^1.0",
        "vite": "^5.0"
    },
    "dependencies": {
        "include-media": "^2.0.0",
        "jquery": "^3.7.1",
        "sass": "^1.83.4"
    }
}

and following is my 'vite.config.js'.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import inject from "@rollup/plugin-inject";

var config = {
    plugins: [
        laravel({
            input: [
                'resources/scss/style.scss',
                'resources/js/app.js'
            ],
            refresh: true,
        }),
        inject({
            $: 'jquery',
            jQuery: 'jquery',
        })
    ],
    build: {
        assetsDir: '',
    },
};

export default defineConfig(({command, mode, ssrBuild}) => {
    if (command === 'serve') {
        config.publicDir = 'public';
        config.build = {
            assetsDir: '',
            copyPublicDir: false,
            emptyOutDir: true,
        };
    }

    return config;
});

I have tried deleting node modules and installing them again. Since I use XAMPP and Docker, I restarted my Mac incase of an occupied port. I tried running app on php artisan serve and Docker (Laradock) setup.

Please consider that the same setup runs smoothly on another project so I don't know witch step I missed.

I tried deleting node_modules and installing them again. Since I ıse XAMPP and Docker, I restarted my computer in case of an occupied port.

Answer 1

This will work:

npm install [email protected] --save-dev

Answer 2

The issue has already been reported and marked as a bug in laravel/vite-plugin https://github.com/laravel/vite-plugin/issues/316

Downgrading to 6.0.8 might work

or update vite.config.js

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    server: {
        origin: 'http://localhost:5173',
        cors: true
    }
});