search

uicrooks / shopify-theme-lab

Shopify theme development environment using Liquid, Vue and Tailwind CSS. Built on top of Shopify CLI 🧪
https://uicrooks.github.io/shopify-theme-lab-docs/
MIT License
737 stars 130 forks source link

Issue with reloader #75

Closed liamhart96 closed 3 years ago

liamhart96 commented 3 years ago

Reloader seems to have an issue, it says disconnected.

ERROR in console:-

WebSocket connection to 'ws://localhost:5050/' failed: _init @ client.js:21 eval @ client.js:39

sergejcodes commented 3 years ago

Hi 👋,

no issues here, can you provide some additional info?

  1. Operating System
  2. Browser
  3. Node version
liamhart96 commented 3 years ago

Hi

Node v14.16.1 Chrome Mac OS 11.3.1

sergejcodes commented 3 years ago

Hi 👋,

I just set up an environment equivalent to the info you provided. Everything seems to work, including reloader.

I could reproduce the error message only after I stopped the npm run start task in the terminal.

I think what you are encountering is actually expected behavior. By running npm run start it spins up a WebSocket server which is required for remote reloading. If the server isn't running you'll get the error, since the remote script tries to establish a connection to the server every couple of seconds.

maximehery commented 3 years ago

Hi, i have the same issue, any news ??

Node v15.6.0 Chrome Windows 10 Insider Preview 21376.1

sergejcodes commented 3 years ago

I just tried it out in a couple of different environments, and I can't reproduce the issue. For me, reloader works everywhere.

The above-mentioned error basically tells that the reloader client script (on the remote Shopify store) which is injected into the webpack bundle can't connect to the dev server (which is started by running the start task).

So I'm assuming if the reloader functionality isn't working for somebody it's because something is blocking the WebSocket connection on their system. Especially if there are no errors being thrown in the terminal after running npm run start

  1. You could try changing the ports for reloader in package.json and restart the start task
  2. You could try running reloader on a secure connection like described here. But usually this shouldn't be a problem for Chrome.
maximehery commented 3 years ago

The problem has suddenly vanished, I don't have any problem with reloading, it's strange but everything works now 😄