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

Question

I'm trying to build an app using Laravel 9 and ReactJS with vite js. I tried following command to build.

npm run dev

But I'm getting following errors,

GET http://[::1]:5173/resources/css/app.css net::ERR_CONNECTION_REFUSED

GET http://[::1]:5173/@vite/client net::ERR_CONNECTION_REFUSED

GET http://[::1]:5173/resources/js/app.jsx net::ERR_CONNECTION_REFUSED

GET http://[::1]:5173/@react-refresh net::ERR_CONNECTION_REFUSED

Noachian

Did you solve this issue? – Dosimeter

I got this too, do you have any ideas? – Desiccant

I developed the same app with Laravel 10 and got no error. – Noachian

Answer 1

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.

Monocotyledon

Thanks for your help mate, this solved the issue for me deploying from local to docker container into DO App Platform. It was driving me absolutely nuts! – Radium

Legend! You saved my deploy. I tried literally anything to fix this problem. I even thought it was because of my webhost. – Dimercaprol

This should be accepted as answer! – Coachandfour

It is simple solution, awesome! I would like to give your answer 20 votes))) – Bang

Weird, I have no idea why this worked but thank you very much. – Imponderabilia

I initially put a like on this answer because it seemed to work, but this is not the solution if you care about hot reload (like I do). Deleting the hot file actually stops the hot reload feature of npm run dev. This error is happening because it's trying to use an IPV6, to force an IPV4 you need to specify the server ip in the vite.config.js file: https://mcmap.net/q/495790/-net-err_connection_refused-using-laravel-9-reactjs-with-vite-js – Brakeman

I spent a whole day on this. You're a lifesaver. Thanks! – Obsequies

Answer 2

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

Smock

Answer 3

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

Fugate

Seriously, Didn't know that, we have to first do this step before building. Also one more thing, we have to set the ASSET_URL to the live domain. – Katowice

Answer 4

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,
        }),
    ],
});

Fluidics

This is the real answer! Deleting the "hot" file is disabling the hot reload and it's something I really don't want to do! Thanks! – Brakeman

Answer 5

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.

Effectual

rewrite an autogenerated file, what a solution – Village

Answer 6

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

Wahlstrom

Answer 7

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

Operable

Answer 8

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.

Lithology

Answer 9

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

Hike

Answer 10

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)

Brakeman

Answer 11

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

Fabiola

Answer 12

This code work for me

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

Pleasure

Thank you for your interest in contributing to the Stack Overflow community. This question already has quite a few answers—including one that has been extensively validated by the community. Are you certain your approach hasn’t been given previously? If so, it would be useful to explain how your approach is different, under what circumstances your approach might be preferred, and/or why you think the previous answers aren’t sufficient. Can you kindly edit your answer to offer an explanation? – Kristin