NPM Fails to Run Vite Commands in Laravel 11 Due to Invalid URL Error

I created a new, default Laravel project using composer, and when I run any Vite command (build, dev, etc.), I get an error. Here’s what happens when I execute the command:

BASHCopied
npm run dev

The error message is as follows:

BASHCopied
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)

I am using the same configuration in another Laravel 11 (Twill CMS) project with identical package versions, where everything runs smoothly. Here are the environment details:

• NPM version: v10.9.0
• Node version: v20.18.0
• PHP: 8.2
• Laravel: 11
• In the .env file, APP_URL=http://127.0.0.1:8000

This is my package.json:

JSONCopied
{
    "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"
    }
}

Below is my vite.config.js file:

JAVASCRIPTCopied
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 already tried the following steps:

• Deleting node_modules and reinstalling packages
• Restarting my Mac to resolve any potential port conflicts (I use both XAMPP and Docker)
• Running the app via both php artisan serve and Docker (Laradock) setups

Since the same configuration works in another project, I am not sure what I might have missed. Any suggestions to resolve the Invalid URL error when running Vite commands would be greatly appreciated.