[SOLVED] Vue hmr err_connection_refused

VueJS
1

Got blank page after created new app with --vue and tried to browse from Android device. New blaze app has no errors, I didn’t try react.

meteor create --vue vuetest
cd vuetest
meteor

Browsed http://192.168.1.3:3000 on android device and emulator; blank page.

In chrome console;
GET http://localhost:5173/imports/ui/main.js net::ERR_CONNECTION_REFUSED
hot-module-replacement.js?hash=8bbefadb77097ac852d6d5dd3db9f23e39ee3511:325 WebSocket connection to ‘ws://localhost:3000/meteor__hmr/websocket’ failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
DevTools failed to load SourceMap: Could not load content for http://192.168.1.3:3000/packages/98021fbe5be698d31a383cf6d245dc69f399852c.map: Unknown error
DevTools failed to load SourceMap: Could not load content for http://192.168.1.3:3000/packages/58c56b51844a69e71c05a0a1bd2fb260ce79b1dd.map: Unknown error
.
.
.
DevTools failed to load SourceMap: Could not load content for http://192.168.1.3:3000/app/34be2a098c2a52c57a7d681ac11d92c3151bd8a0.map: Unknown error
DevTools failed to load SourceMap: Could not load content for http://192.168.1.3:3000/d71c36ae72338e3dbc278ab1e9b7cb1418cfc1df.map: Unknown error
90hot-module-replacement.js?hash=8bbefadb77097ac852d6d5dd3db9f23e39ee3511:325 WebSocket connection to ‘ws://localhost:3000/meteor__hmr/websocket’ failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
connect @ hot-module-replacement.js?hash=8bbefadb77097ac852d6d5dd3db9f23e39ee3511:325

I don’t know where port 5173 comes from at first error;
http://localhost:5173/imports/ui/main.js net

Notice url is localhost at second;
ws://localhost:3000/meteor__hmr/websocket

Running with “meteor --port 3000” didn’t help.
Running with “meteor --port 192.168.1.3:3000” still blank page but got “HMR: connected” in the console; still socks error. Same result with setting “ROOT_URL=http://192.168.1.3:3000”

GET http://localhost:5173/imports/ui/main.js net::ERR_CONNECTION_REFUSED
socket-stream-client.js?hash=cead8e84bd8ebf243d505fc1bac78ee9d9e6be3d:1706 WebSocket connection to ‘ws://192.168.1.3:3000/sockjs/609/e1uz0fhk/websocket’ failed: WebSocket is closed before the connection is established.
hot-module-replacement.js?hash=8bbefadb77097ac852d6d5dd3db9f23e39ee3511:342 HMR: connected
DevTools failed to load SourceMap: Could not load content for http://192.168.1.3:3000/packages/98021fbe5be698d31a383cf6d245dc69f399852c.map: Unknown error
.
.
.

Development server Windows 10
No problems on pc with chrome, edge, firefox, opera…
Reproduced every time with meteor@2.11.0 and meteor@2.10.0
Tried with different ports

I appreciate any help.

2

There seems like an error reaching the HMR server from the emulator

3

Just tested with react. New react and blaze apps working as expected. Only new vue app has problem. Do I need to do anything special for vue hmr ?

4

You can confirm by removing the package and checking if it will run. Then you can post it as a GitHub issue so someone can help check

5

Removed hot-module-replacement; still blank page…

image
image918×85 8.67 KB

6

Weird that this is happening only in vue. This looks like a port permission issue but it has been a while since I used the android emulator. You can post this in github for visibility with the meteor developers

7

While I was too much focused on Android issues, it hit me when I noticed browsing from another pc doesn’t work also and started to dig why local host and what is that port 5173.
image

As you would guess this will be our first Vue project. For anyone else stepping into Meteor+Vue like us; 5173 is the default Vite dev serverwhich uses localhost by default.

Solution is simply adding host to vite.config.js

	server:{
		host:"*ip.instead.of.localhost*",
	},

Maybe @akryum can find an elegant solution to have boilerplate running out of box.

1 Like
8

We have been facing the same issue for quite some time, I hope there’s some official FIX comes along. Btw we have raised a PR for fixing it,

Details here - How to resolve the Hot Module Replacement issue while testing your Vue-Meteor App on Actual Device | by Vishnu Teja Bandi | Fasal Engineering | Medium