net::ERR_CONNECTION_REFUSED using Laravel 9, ReactJs with vite js

If you entered npm run build on production, your .env file looks good, and you still have such errors as the author – just delete the file public/hot.

For those using Laravel Sail, open the vite.config.js file and configure it like so:

export default defineConfig({

  plugins: [
    react(),
    laravel({
        input: ['resources/css/app.css', 'resources/js/app.js'],
        refresh: true,
    }),
  ], 
  server: {
    hmr: {
        host: 'localhost',
    },
  }
});

If need be, stop and restart the server sail npm run dev

add host in your vite.config.js, so it will force it to IPv4

export default defineConfig({
    server: {
        host: '127.0.0.1',  // Add this to force IPv4 only
    },
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Its Work for me 1-First Run npm run dev in Terminal 2-Then Run npm run build

This means that your assets are not built yet, use npm run build.

If you have run npm run dev then you must find a file in public/hot and Rewrite the proper address / URL in it. For me http://127.0.0.1:5173 worked.

first of all, you need to delete a file the file is public/hot, or you can see below screenshot and the run cmd. ...> npm run build [1]: https://i.sstatic.net/BHnTCw4z.png

I think I may have found a solution with the build option called Rollup. When building in production, rollup will remove unused code. In this process it will bundle the required assets and reference them in accordance to the URL that you would be using at that current moment.

To fixed it, you could try this:

export default defineConfig({
      build: {
        rollupOptions: {}
      }
    })

I was helped by a similar issue posted on Github so maybe you could use that as a point of reference. Here is the Discussion

In my case the issue was that the port 5173 was already in use. I've just freed it - and everything worked again. Hope that helps.

You could look at Chrome extensions you have enabled. In my case, it was "uBlock Origin" that was messing with vite dev server

If you care about not losing the Hot Reload feature, deleting the "public/hot" file is something that you shouldn't do!

Hardcoding an IP address is not a possible approach either if you're working on a shared repository and users have different local IPs (this was my case).

In addition to Kidd Tang answer, if you don't want to hardcode a static IP but read it from the APP_URL in the .env file, just edit the vite.config.js like this:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import dotenv from 'dotenv';

dotenv.config();

export default defineConfig({
    server: {
        host: process.env.APP_URL,
    },
    plugins: [
        laravel({
            input: [
                'resources/css/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        })
    ],
});

You need to have the dotenv module installed (npm install dotenv)

My experience with this problem has been with laravel inside a docker environment.

With this configuration my environment is now working with SSL certs and dockerized vite configuration.

My docker-compose.yml

services:
  app:
    ports:
      - "80:80"
      - "443:443"
      - "9003:9003"
      - "5173:5173"

    extra_hosts:
      - "myhostname.com:0.0.0.0"

My vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import fs from 'fs';

const key = fs.readFileSync('/etc/ssl/private/myhostname.com.key');
const cert = fs.readFileSync('/etc/ssl/certs/myhostname.com.pem');


export default defineConfig({

    //...Omitted...//

    server: {
        host: 'myhostname.com',
        port: 5173,
        https: {
            key: key,
            cert: cert,
        },
        hmr: {
            host: 'myhostname.com',
            port: 5173,
        },
    },
});

If you want to use SSL certification with a custom local hostname, you finally have to insert a record in the /etc/hosts file on your host machine like this:

127.0.0.1 myhostname.com

Hope that can helps someone.

This code work for me

export default defineConfig({
    server: {
        host: '10.10.x.30',  // Add this to force IPv4 only
    },