Laravel 12.9.2 error when I run composer run dev or npm run dev

Hi All,

I installed Laravel 12 with vue and Inersha. Also, I am running it in Herd Pro

It works fine with no issues, but when I tried to run

npm run dev 
or
composer run dev

The screen become black and blank, with an error in the console:

GET http://[::1]:5173/@vite/client net::ERR_BLOCKED_BY_CLIENT
GET http://[::1]:5173/resources/js/app.ts net::ERR_BLOCKED_BY_CLIENT

while if I run npm run build, it works just fine, but I can't run it with auto reload when I make changes.

Any thoughts what I am doing wrong.

Thank you.

LaryAI

1 year ago

Level 58

The error you're encountering, ERR_BLOCKED_BY_CLIENT, typically indicates that something is blocking the requests to your Vite development server. This can often be caused by browser extensions, such as ad blockers or privacy tools, that block certain types of requests.

Here are some steps you can take to resolve the issue:

Check Browser Extensions: Disable any ad blockers or privacy extensions in your browser and try running npm run dev again. Extensions like AdBlock, uBlock Origin, or Privacy Badger can sometimes block local development requests.
Use a Different Browser: Try accessing your application using a different browser or an incognito/private window to see if the issue persists. This can help determine if the problem is related to browser settings or extensions.
Check Vite Configuration: Ensure that your Vite configuration is set up correctly. In your vite.config.js or vite.config.ts, make sure the server is configured to listen on the correct host and port. You might want to explicitly set the host to localhost:
```
export default {
  server: {
    host: 'localhost',
    port: 5173, // Ensure this matches the port you're using
  },
};
```
Firewall or Network Settings: Check if there are any firewall or network settings that might be blocking the requests. Ensure that your development server's port (usually 5173 for Vite) is open and accessible.
Check Hosts File: Ensure that your system's hosts file is not misconfigured. The hosts file should not have any entries that could interfere with localhost or ::1.
Clear Browser Cache: Sometimes, clearing the browser cache can resolve unexpected issues. Try clearing the cache and reloading the page.
Check for Proxy Settings: If you're using a proxy, ensure that it's configured correctly and not interfering with local development.

If none of these steps resolve the issue, consider providing more details about your setup, such as your vite.config.js file and any relevant network configurations, to get more targeted help.

iamgeorge

1 year ago

Level 31

Hi all, I’m using Laravel 12 with Vue and Inertia in Herd Pro. Everything works fine in production, but running npm run dev gives a blank screen with these errors: GET http://[::1]:5173/@vite/client net::ERR_BLOCKED_BY_CLIENT and GET http://[::1]:5173/resources/js/app.ts net::ERR_BLOCKED_BY_CLIENT. Turns out the issue is caused by an ad blocker or privacy extension blocking Vite’s dev server (especially on [::1]/IPv6). I fixed it by: 1) Disabling the ad blocker or whitelisting localhost:5173, 2) Forcing Vite to use IPv4 by editing vite.config.js:

export default defineConfig({
  server: { host: '127.0.0.1' },
  plugins: [
    laravel({ input: ['resources/css/app.css', 'resources/js/app.ts'], refresh: true }),
    vue(),
  ],
});

and updating .env:

VITE_DEV_SERVER_HOST=127.0.0.1

Please or to participate in this conversation.