search

Shopify / shopify-app-template-remix

323 stars 134 forks source link

Live Reload doesn't work #403

Closed btomaj closed 10 months ago

btomaj commented 10 months ago

Issue summary

Live Reload doesn't update the page on saving file change on the latest version of the template. I've tried getting help to track down the source of the problem from the Remix Discord to no avail.

Expected behavior

When running the dev server through npm run dev, file changes should update the page without a page refresh.

Actual behavior

Saving file changes prints the following error to console:

20:56:20 │ remix    │  info  rebuilding... (~ app\routes\app._index.tsx)
20:56:22 │ remix    │ [shopify-api/INFO] version 8.0.2, environment Remix
20:56:22 │ remix    │  info  rebuilt (2s)
20:56:23 │ remix    │  info  app server ready (1s)
20:56:23 │ remix    │  info  hmr
20:56:23 │ remix    │ 
Error forwarding web request: Error: connect ECONNREFUSED ::1:57247

This has been replicated numerous times, each time with a different port, and netstat shows no port conflicts

 [node.exe]
  TCP    0.0.0.0:57247          DESKTOP:0      LISTENING

Steps to reproduce the problem

  1. git clone this repo
  2. npm install
  3. npm run dev
  4. Make a change to a file
meandillar commented 10 months ago

Is this for a clean install or after updating? I've been experiencing the Error forwarding web request problem after updating from 1.3.0 to 2.0.2 of @shopify/shopify-app-remix.

Got it working in the end - I tried updating node to 20.9.0, updated all @remix-run and @shopify packages, created a new app and copy/pasted the code from the server files to my app to make sure they were up to date, passed --reset flag with dev command. Also tried with and without a vpn. Finally got it to work after deleting node_modules and package-lock.json then running npm install so I suspect that was the main culprit.

btomaj commented 10 months ago

@meandillar it was after updating. Do you know which package had the conflict? I noticed that @shopify/shopify-app-remix used v2.1.0 of some Remix package, so I upgraded all my Remix packages to v2.1.0, but that didn’t help.

gitlexa commented 10 months ago

I did a clean installation and am receiving the Error forwarding web request: AggregateError error. The same happens with the update

gitlexa commented 10 months ago

I managed to fix it like this: In the shopify.web.toml file, replace dev with "npm exec remix dev -- --manual".

cyberwombat commented 10 months ago

I have exact same issue but the fix does nothing for me. here's my dump - it eventually dies.

08:18:09 │ remix      │ 
08:18:09 │ remix      │  💿  remix dev
08:18:09 │ remix      │ 
08:18:09 │ remix      │  info  building...
08:18:10 │ remix      │  info  built (845ms)
08:18:11 │ remix      │ [shopify-api/INFO] version 8.0.2, environment Remix
08:18:11 │ extensions │ Draft updated successfully for extension: admin-block
08:18:11 │ remix      │ [remix-serve] http://localhost:49185 (http://172.20.10.3:49185)
Error forwarding web request: AggregateError
08:18:57 │ remix      │ GET /?embedded=1&hmac=bf8b5940fa9bf8fd694fe62311bc14b4cb1f569b4e8c14113c2be116f634e926&host=YWRtaW4uc2hvcGlm
eS5jb20vc3RvcmUva2l0dGVuc2J5bWFpbA&locale=en&prefetch=1&session=dbe9e04aa8d3091596e9407da13646ac40374393cb05cc9eb23e6c7e9f0a1374&sho
p=foo.myshopify.com&timestamp=1698419936 302 - - 14.033 ms
08:18:57 │ remix      │ [shopify-app/INFO] Authenticating admin request
08:18:57 │ remix      │ [shopify-app/INFO] Authenticating admin request
08:18:57 │ remix      │ GET /app?embedded=1&hmac=bf8b5940fa9bf8fd694fe62311bc14b4cb1f569b4e8c14113c2be116f634e926&host=YWRtaW4uc2hvc
GlmeS5jb20vc3RvcmUva2l0dGVuc2J5bWFpbA&locale=en&prefetch=1&session=dbe9e04aa8d3091596e9407da13646ac40374393cb05cc9eb23e6c7e9f0a1374&
shop=foo.myshopify.com&timestamp=1698419936 302 - - 21.660 ms
08:18:57 │ remix      │ [shopify-app/INFO] Authenticating admin request
08:18:57 │ remix      │ GET /auth/session-token?embedded=1&hmac=bf8b5940fa9bf8fd694fe62311bc14b4cb1f569b4e8c14113c2be116f634e926&hos
t=YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUva2l0dGVuc2J5bWFpbA&locale=en&prefetch=1&session=dbe9e04aa8d3091596e9407da13646ac40374393cb05cc9eb2
3e6c7e9f0a1374&shop=foo.myshopify.com&timestamp=1698419936&shopify-reload=https%3A%2F%2Favg-fatty-feed-institutional.trycl
oudflare.com%2Fapp%3Fembedded%3D1%26hmac%3Dbf8b5940fa9bf8fd694fe62311bc14b4cb1f569b4e8c14113c2be116f634e926%26host%3DYWRtaW4uc2hvcGl
meS5jb20vc3RvcmUva2l0dGVuc2J5bWFpbA%26locale%3Den%26prefetch%3D1%26session%3Ddbe9e04aa8d3091596e9407da13646ac40374393cb05cc9eb23e6c7
e9f0a1374%26shop%3Dfoo.myshopify.com%26timestamp%3D1698419936 200 - - 5.681 ms
08:18:57 │ remix      │ GET /?embedded=1&hmac=0776da6de4b0c3dbe83a6b10559656cc947089cacb283b8e9f28fab3a936806d&host=YWRtaW4uc2hvcGlm
eS5jb20vc3RvcmUva2l0dGVuc2J5bWFpbA&locale=en&session=dbe9e04aa8d3091596e9407da13646ac40374393cb05cc9eb23e6c7e9f0a1374&shop=kittensby
mail.myshopify.com&timestamp=1698419937 302 - - 3.589 ms
08:18:57 │ remix      │ [shopify-app/INFO] Authenticating admin request
08:18:57 │ remix      │ [shopify-app/INFO] Authenticating admin request
08:18:57 │ remix      │ GET /app?embedded=1&hmac=0776da6de4b0c3dbe83a6b10559656cc947089cacb283b8e9f28fab3a936806d&host=YWRtaW4uc2hvc
GlmeS5jb20vc3RvcmUva2l0dGVuc2J5bWFpbA&locale=en&session=dbe9e04aa8d3091596e9407da13646ac40374393cb05cc9eb23e6c7e9f0a1374&shop=kitten
sbymail.myshopify.com&timestamp=1698419937 302 - - 5.737 ms
08:18:58 │ remix      │ [shopify-app/INFO] Authenticating admin request
08:18:58 │ remix      │ GET /auth/session-token?embedded=1&hmac=0776da6de4b0c3dbe83a6b10559656cc947089cacb283b8e9f28fab3a936806d&hos
t=YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUva2l0dGVuc2J5bWFpbA&locale=en&session=dbe9e04aa8d3091596e9407da13646ac40374393cb05cc9eb23e6c7e9f0a1
374&shop=foo.myshopify.com&timestamp=1698419937&shopify-reload=https%3A%2F%2Favg-fatty-feed-institutional.trycloudflare.co
m%2Fapp%3Fembedded%3D1%26hmac%3D0776da6de4b0c3dbe83a6b10559656cc947089cacb283b8e9f28fab3a936806d%26host%3DYWRtaW4uc2hvcGlmeS5jb20vc3
RvcmUva2l0dGVuc2J5bWFpbA%26locale%3Den%26session%3Ddbe9e04aa8d3091596e9407da13646ac40374393cb05cc9eb23e6c7e9f0a1374%26shop%3Dkittens
bymail.myshopify.com%26timestamp%3D1698419937 200 - - 3.376 ms
08:18:58 │ remix      │ [shopify-app/INFO] Authenticating admin request
08:18:58 │ remix      │ [shopify-app/INFO] Authenticating admin request
08:18:58 │ remix      │ GET /app?embedded=1&hmac=0776da6de4b0c3dbe83a6b10559656cc947089cacb283b8e9f28fab3a936806d&host=YWRtaW4uc2hvc
GlmeS5jb20vc3RvcmUva2l0dGVuc2J5bWFpbA&locale=en&session=dbe9e04aa8d3091596e9407da13646ac40374393cb05cc9eb23e6c7e9f0a1374&shop=kitten
sbymail.myshopify.com&timestamp=1698419937 200 - - 42.083 ms
Error forwarding websocket request: AggregateError
08:18:59 │ remix      │ [shopify-app/INFO] Authenticating admin request
08:18:59 │ remix      │ [shopify-app/INFO] Authenticating admin request
08:18:59 │ remix      │ GET /app?embedded=1&hmac=0776da6de4b0c3dbe83a6b10559656cc947089cacb283b8e9f28fab3a936806d&host=YWRtaW4uc2hvc
GlmeS5jb20vc3RvcmUva2l0dGVuc2J5bWFpbA&locale=en&session=dbe9e04aa8d3091596e9407da13646ac40374393cb05cc9eb23e6c7e9f0a1374&shop=kitten
sbymail.myshopify.com&timestamp=1698419937 302 - - 6.819 ms
08:18:59 │ remix      │ [shopify-app/INFO] Authenticating admin request
08:18:59 │ remix      │ [shopify-app/INFO] Authenticating admin request
08:18:59 │ remix      │ GET /app?embedded=1&hmac=0776da6de4b0c3dbe83a6b10559656cc947089cacb283b8e9f28fab3a936806d&host=YWRtaW4uc2hvc
GlmeS5jb20vc3RvcmUva2l0dGVuc2J5bWFpbA&locale=en&session=dbe9e04aa8d3091596e9407da13646ac40374393cb05cc9eb23e6c7e9f0a1374&shop=kitten
sbymail.myshopify.com&timestamp=1698419937 302 - - 7.479 ms
08:18:59 │ remix      │ [shopify-app/INFO] Authenticating admin request
08:18:59 │ remix      │ GET /auth/session-token?embedded=1&hmac=0776da6de4b0c3dbe83a6b10559656cc947089cacb283b8e9f28fab3a936806d&hos
t=YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUva2l0dGVuc2J5bWFpbA&locale=en&session=dbe9e04aa8d3091596e9407da13646ac40374393cb05cc9eb23e6c7e9f0a1
374&shop=foo.myshopify.com&timestamp=1698419937&shopify-reload=https%3A%2F%2Favg-fatty-feed-institutional.trycloudflare.co
m%2Fapp%3Fembedded%3D1%26hmac%3D0776da6de4b0c3dbe83a6b10559656cc947089cacb283b8e9f28fab3a936806d%26host%3DYWRtaW4uc2hvcGlmeS5jb20vc3
RvcmUva2l0dGVuc2J5bWFpbA%26locale%3Den%26session%3Ddbe9e04aa8d3091596e9407da13646ac40374393cb05cc9eb23e6c7e9f0a1374%26shop%3Dkittens
bymail.myshopify.com%26timestamp%3D1698419937 200 - - 1.873 ms
08:18:59 │ remix      │ [shopify-app/INFO] Authenticating admin request
08:18:59 │ remix      │ GET /auth/session-token?embedded=1&hmac=0776da6de4b0c3dbe83a6b10559656cc947089cacb283b8e9f28fab3a936806d&hos
t=YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUva2l0dGVuc2J5bWFpbA&locale=en&session=dbe9e04aa8d3091596e9407da13646ac40374393cb05cc9eb23e6c7e9f0a1
374&shop=foo.myshopify.com&timestamp=1698419937&shopify-reload=https%3A%2F%2Favg-fatty-feed-institutional.trycloudflare.co
m%2Fapp%3Fembedded%3D1%26hmac%3D0776da6de4b0c3dbe83a6b10559656cc947089cacb283b8e9f28fab3a936806d%26host%3DYWRtaW4uc2hvcGlmeS5jb20vc3
RvcmUva2l0dGVuc2J5bWFpbA%26locale%3Den%26session%3Ddbe9e04aa8d3091596e9407da13646ac40374393cb05cc9eb23e6c7e9f0a1374%26shop%3Dkittens
bymail.myshopify.com%26timestamp%3D1698419937 200 - - 3.182 ms
08:18:59 │ remix      │ [shopify-app/INFO] Authenticating admin request
08:18:59 │ remix      │ [shopify-app/INFO] Authenticating admin request
08:18:59 │ remix      │ GET /app?embedded=1&hmac=0776da6de4b0c3dbe83a6b10559656cc947089cacb283b8e9f28fab3a936806d&host=YWRtaW4uc2hvc
GlmeS5jb20vc3RvcmUva2l0dGVuc2J5bWFpbA&locale=en&session=dbe9e04aa8d3091596e9407da13646ac40374393cb05cc9eb23e6c7e9f0a1374&shop=kitten
sbymail.myshopify.com&timestamp=1698419937 302 - - 7.405 ms
08:19:00 │ remix      │ [shopify-app/INFO] Authenticating admin request
08:19:00 │ remix      │ [shopify-app/INFO] Authenticating admin request
08:19:00 │ remix      │ GET /app?embedded=1&hmac=0776da6de4b0c3dbe83a6b10559656cc947089cacb283b8e9f28fab3a936806d&host=YWRtaW4uc2hvc
GlmeS5jb20vc3RvcmUva2l0dGVuc2J5bWFpbA&locale=en&session=dbe9e04aa8d3091596e9407da13646ac40374393cb05cc9eb23e6c7e9f0a1374&shop=kitten
sbymail.myshopify.com&timestamp=1698419937 302 - - 10.984 ms
08:19:00 │ remix      │ [shopify-app/INFO] Authenticating admin request
08:19:00 │ remix      │ GET /auth/session-token?embedded=1&hmac=0776da6de4b0c3dbe83a6b10559656cc947089cacb283b8e9f28fab3a936806d&hos
t=YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUva2l0dGVuc2J5bWFpbA&locale=en&session=dbe9e04aa8d3091596e9407da13646ac40374393cb05cc9eb23e6c7e9f0a1
374&shop=foo.myshopify.com&timestamp=1698419937&shopify-reload=https%3A%2F%2Favg-fatty-feed-institutional.trycloudflare.co
m%2Fapp%3Fembedded%3D1%26hmac%3D0776da6de4b0c3dbe83a6b10559656cc947089cacb283b8e9f28fab3a936806d%26host%3DYWRtaW4uc2hvcGlmeS5jb20vc3
RvcmUva2l0dGVuc2J5bWFpbA%26locale%3Den%26session%3Ddbe9e04aa8d3091596e9407da13646ac40374393cb05cc9eb23e6c7e9f0a1374%26shop%3Dkittens
bymail.myshopify.com%26timestamp%3D1698419937 200 - - 3.769 ms
08:19:00 │ remix      │ [shopify-app/INFO] Authenticating admin request
08:19:00 │ remix      │ GET /auth/session-token?embedded=1&hmac=0776da6de4b0c3dbe83a6b10559656cc947089cacb283b8e9f28fab3a936806d&hos
t=YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUva2l0dGVuc2J5bWFpbA&locale=en&session=dbe9e04aa8d3091596e9407da13646ac40374393cb05cc9eb23e6c7e9f0a1
374&shop=foo.myshopify.com&timestamp=1698419937&shopify-reload=https%3A%2F%2Favg-fatty-feed-institutional.trycloudflare.co
m%2Fapp%3Fembedded%3D1%26hmac%3D0776da6de4b0c3dbe83a6b10559656cc947089cacb283b8e9f28fab3a936806d%26host%3DYWRtaW4uc2hvcGlmeS5jb20vc3
RvcmUva2l0dGVuc2J5bWFpbA%26locale%3Den%26session%3Ddbe9e04aa8d3091596e9407da13646ac40374393cb05cc9eb23e6c7e9f0a1374%26shop%3Dkittens
bymail.myshopify.com%26timestamp%3D1698419937 200 - - 8.606 ms
Error forwarding websocket request: AggregateError
Error forwarding websocket request: AggregateError
Error forwarding websocket request: AggregateError
Error forwarding websocket request: AggregateError
Error forwarding websocket request: AggregateError
Error forwarding websocket request: AggregateError

I also upgraded to 2.1.0

Packages:

 "@prisma/client": "^5.5.2",
    "@remix-run/node": "^2.1.0",
    "@remix-run/react": "^2.1.0",
    "@remix-run/serve": "^2.1.0",
    "@shopify/app": "3.50.0",
    "@shopify/app-bridge-types": "^0.0.3",
    "@shopify/cli": "3.50.0",
    "@shopify/polaris": "^12.0.1",
    "@shopify/shopify-app-remix": "^2.0.2",
    "@shopify/shopify-app-session-storage-prisma": "^2.0.1",
    "cross-env": "^7.0.3",
    "isbot": "latest",
    "prisma": "^5.5.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "tiny-invariant": "^1.3.1"
  },
  "devDependencies": {
    "@remix-run/dev": "^2.1.0",
    "@remix-run/eslint-config": "^2.1.0",
    "@types/eslint": "^8.40.0",
    "eslint": "^8.42.0",
    "eslint-config-prettier": "^8.8.0",
    "prettier": "^2.8.8"
  },
cyberwombat commented 10 months ago

Ok I downgraded to all the packages in the current repo as of today (2.0.0) and ensured the core files (shopify.server, remix.config etc) were the same and it seems to have solved the problem for me.

btomaj commented 10 months ago

I still have this issue after deleting node_modules and package-lock.json, and doing a fresh npm install in an unmodified clone of this repository.

I managed to fix it like this: In the shopify.web.toml file, replace dev with "npm exec remix dev -- --manual".

@gitlexa --manual just disables Live Reload.

gitlexa commented 10 months ago

--manual just disables Live Reload.

However, this does not disable LiveReload (remix version: 2.1.0) In my case, it solves the problem of missing hot reload.

meandillar commented 10 months ago

@btomaj I ended up getting it to work with the same package versions as the current CLI fresh install which is 2.0.0, like @cyberwombat used. I'm also using node v20.9.0 so that might be worth a shot. Here's my package.json

{
  "name": "some-name",
  "private": true,
  "scripts": {
    "build": "NODE_ENV=production remix build",
    "predev": "prisma generate && prisma migrate deploy",
    "dev": "shopify app dev",
    "config:link": "shopify app config link",
    "config:push": "shopify app config push",
    "generate": "shopify app generate",
    "deploy": "shopify app deploy",
    "config:use": "shopify app config use",
    "env": "shopify app env",
    "start": "remix-serve build",
    "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
    "shopify": "shopify",
    "prisma": "prisma",
    "setup": "prisma generate && prisma migrate deploy"
  },
  "dependencies": {
    "@prisma/client": "^4.13.0",
    "@remix-run/node": "^2.0.0",
    "@remix-run/react": "^2.0.0",
    "@remix-run/serve": "^2.0.0",
    "@shopify/app": "3.50.0",
    "@shopify/app-bridge-types": "^0.0.3",
    "@shopify/cli": "3.50.0",
    "@shopify/polaris": "^11.1.2",
    "@shopify/polaris-icons": "^7.8.1",
    "@shopify/shopify-app-remix": "^2.0.2",
    "@shopify/shopify-app-session-storage-prisma": "^2.0.0",
    "cross-env": "^7.0.3",
    "isbot": "latest",
    "prisma": "^4.13.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@remix-run/dev": "^2.0.0",
    "@remix-run/eslint-config": "^2.0.0",
    "@types/eslint": "^8.40.0",
    "@types/node": "^20.6.3",
    "@types/react": "^18.2.31",
    "@types/react-dom": "^18.2.14",
    "eslint": "^8.42.0",
    "eslint-config-prettier": "^8.8.0",
    "prettier": "^2.8.8"
  },
  "workspaces": [
    "web",
    "web/frontend",
    "extensions/*"
  ],
  "trustedDependencies": [
    "@shopify/plugin-cloudflare"
  ]
}
O-Connects commented 10 months ago

Why is it that my remix-server can start and the hot reload server cannot, causing the remix-server process to end within a few seconds of starting.😪

btomaj commented 10 months ago

I can confirm that upgrading to node v20, and using v2.0.0 Remix packages resolved the issue for me. I reported this to the Remix team here: https://discord.com/channels/770287896669978684/1166703919775350915/1168489728442642442

alexandrosk commented 8 months ago

Same issue still here.. anyway..

codeyourwayup commented 8 months ago

same problem, keep disconnecting from Error forwarding web request: Error: connect ECONNREFUSED ::1:57247

codeyourwayup commented 8 months ago

it seems still exists

dkcamargo commented 8 months ago

Ok I downgraded to all the packages in the current repo as of today (2.0.0) and ensured the core files (shopify.server, remix.config etc) were the same and it seems to have solved the problem for me.

Hey, man im having the exact same error you were having back then. Would you happen to know the exact packages you downgraded? Or another posible solution?

meandillar commented 8 months ago

@dkcamargo what version of node are you running? Mine works with v20.9.0. As of today I also updated my @remix-run packages to 2.4.1 and everything works. @shopify/app and @shopify/cli version is 3.53.0. Hope that helps

dkcamargo commented 8 months ago

Hey man, actually i tried running in various versions and no luck. I'll try this combination but it'd be cool if we had some feedback from this error. I mean i don't even know what's happening

dkcamargo commented 8 months ago

No luck :(

image

meandillar commented 8 months ago

@dkcamargo when I originally got this problem the thing that finally fixed it after updating packages and using node v20 was deleting node_modules and package-lock.json then running npm install again. Worth a go

dkcamargo commented 8 months ago

Yeah man actually i just tried that, changed from node v20.11 to v20.9.0 changed my remix packages to v2.4.1 and v2.0.0 and removed node_modules and package-lock.json. And no luck I've been changing versions and reinstalling node_modules all day and no luck with any version. I'm very frustrated since i'm trying to fix this for three days now and no luck

dkcamargo commented 8 months ago

I even tried node v18 just to try out and also no luck. The thing is in production server it works perfectly but not in dev mode. And my team can't work in the app since every 5 minutes the dev dies...

btomaj commented 7 months ago

Ok I downgraded to all the packages in the current repo as of today (2.0.0) and ensured the core files (shopify.server, remix.config etc) were the same and it seems to have solved the problem for me.

Hey, man im having the exact same error you were having back then. Would you happen to know the exact packages you downgraded? Or another posible solution?

The issue was running an old version of node.js. Once I upgraded node.js, I got my Remix packages synced up to the same version (happened to be 2.0.0 at the time), and that fixed the issue for me. Make sure you don't have old package versions lurking as duplicated dependencies.

imgopaal commented 3 months ago

npm exec remix dev -- --manual

thankssss