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

I got this too, do you have any ideas? – Manyang Nov 26 '22 at 05:18 — Manyang, Nov 26 '22 at 05:18
I developed the same app with Laravel 10 and got no error. – Sourav Das Jun 01 '23 at 12:35 — Sourav Das, Jun 01 '23 at 12:35

score 33 · Answer 1 · edited May 04 '23 at 21:18

33

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.

edited May 04 '23 at 21:18

miken32

42,008
16
111
154

answered Dec 07 '22 at 09:28

Paweł Moskal

613
7
10

3

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! – Mick Davies Jan 24 '23 at 23:03
1

Legend! You saved my deploy. I tried literally anything to fix this problem. I even thought it was because of my webhost. – Keygun2k1 Feb 06 '23 at 10:01
This should be accepted as answer! – Slasher Jun 13 '23 at 19:37
It is simple solution, awesome! I would like to give your answer 20 votes))) – Alexander Leon Bulatov Jul 07 '23 at 12:42
Weird, I have no idea why this worked but thank you very much. – Hoswoo Aug 25 '23 at 06:37

score 5 · Answer 2 · answered Feb 28 '23 at 19:12

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

score 1 · Answer 3 · answered Nov 29 '22 at 00:31

1

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

answered Nov 29 '22 at 00:31

Majd Harb

41
4

score 1 · Answer 4 · answered Jan 04 '23 at 13:33

1

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

answered Jan 04 '23 at 13:33

javad asghari

69
1
2

score 0 · Answer 5 · answered Nov 28 '22 at 14:26

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

score 0 · Answer 6 · answered Dec 06 '22 at 08:32

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

score 0 · Answer 7 · answered Dec 21 '22 at 15:17

0

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.

answered Dec 21 '22 at 15:17

runner

9
1

score 0 · Answer 8 · answered Jun 19 '23 at 13:15

0

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.

answered Jun 19 '23 at 13:15

Jay Momaya

1,831
19
32

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

8 Answers8