Vite assets block by client

http://[::]:5173/@vite/client net::ERR_BLOCKED_BY_CLIENT

I truly don't know what else to do here. I can't get this prolem to go away.

LaryAI

3 years ago

Level 58

This error message usually indicates that the client (i.e. the browser) is blocking the request to load the asset. This can happen for a variety of reasons, such as ad blockers or browser extensions.

One solution is to try disabling any ad blockers or browser extensions that may be causing the issue. If that doesn't work, you can try serving the assets from a different URL or port.

If you're using Laravel with Vite, you can configure the asset URL in your vite.config.js file. For example, if you want to serve the assets from port 3000 instead of the default port 5173, you can add the following to your vite.config.js file:

module.exports = {
  server: {
    port: 3000,
  },
};

Then, update your Laravel view to load the assets from the new URL:

<script src="http://localhost:3000/@vite/client"></script>

Make sure to restart your Vite server after making changes to the vite.config.js file.

If none of these solutions work, you may need to investigate further to determine the root cause of the issue.

CamKem

3 years ago

Level 10

Are you using valet, with HTTPS?

BernardoBF4

3 years ago

Level 4

@CamKem Neither. But I made it work now :)

CamKem

3 years ago

Level 10

I have had this problem when I run valet secure, vite needs to be configured to work with HTTPS. You can use the following config if you are using Vue.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
            valetTls: 'yoursite.test',
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    server: {
        https: true,
        host: 'yoursite.test',
    },
});

1 like

BernardoBF4

3 years ago

Best Answer

Level 4

I added the code below to vite.config.js and now it works.

hmr: {
      host: 'localhost',
    },

COTIGA

2 years ago

Level 2

If you use a browser with an ad blocker, add this to the "adblock" filter. It works for all sites in .test

@@||[::1]^$domain=~^.*\.test

2 likes

Please or to participate in this conversation.