Endless reloading by start svelte-kit it with VS Code Remote-SSH terminal

Describe the bug

Endless reloading by start it from VS Code Remote-SSH terminal: npm run dev -- --open (open localhost:3000 on local computer and svelte is running on remote)

Termorary solution: With --host it works great: npm run dev -- --host --open (open 111.222.333.444:3000 (server ip) on local computer and svelte is running on remote)

Other projects works fine on the same server with same VS Code Remote-SSH, sapper-template, for example. Problem (for me) only with SvelteKit now.

Logs Please include browser console and server logs around the time this bug occurred.

To Reproduce

1. Open VS Code
2. Install Remote-SSH (if it doesn’t exist)
3. Connect to you remote server with Remote-SSH
4. pnpm init svelte@next my-app
5. pnpm i
6. npm run dev -- --open

Expected behavior Work on VS Code Remote-SSH with port forwarding without endless reloading.

Stacktraces If you have a stack trace to include, we recommend putting inside a <details> block for the sake of the thread’s readability:

Stack trace

[vite] connecting...
content.js:1 Uncaught (in promise) Error: Unexpected token u in JSON at position 0
    at A (content.js:1)
A @ content.js:1
Promise.then (async)
(anonymous) @ content.js:1
(anonymous) @ content.js:1
t @ content.js:1
(anonymous) @ content.js:1
(anonymous) @ content.js:1
client:184 WebSocket connection to 'ws://localhost:24678/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
(anonymous) @ client:184
client:340 [vite] server connection lost. polling for restart...
(index):1 Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://localhost:3001/src/routes/index.svelte?import
start.js:1024 Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://localhost:3001/src/routes/$layout.svelte?import
async function (async)
start @ start.js:1018
(anonymous) @ (index):222

Information about your SvelteKit Installation:

Diagnostics

• The output of npx envinfo --system --npmPackages svelte,@sveltejs/kit,vite --binaries --browsers

  System: OS: Linux 4.15 Ubuntu 18.04.4 LTS (Bionic Beaver) CPU: (2) x64 Intel Xeon E3-12xx v2 (Ivy Bridge, IBRS) Memory: 98.10 MB / 984.89 MB Container: Yes Shell: 4.4.20 - /bin/bash

  Binaries: Node: 14.16.1 - /usr/local/bin/node Yarn: 2.0.0-rc.27 - ~/.npm-global/bin/yarn npm: 6.13.7 - ~/.npm-global/bin/npm

  npmPackages: @sveltejs/kit: next => 1.0.0-next.80 svelte: ^3.29.0 => 3.37.0

• Your browser

  Chrome 88.0.4324.150 (Official), (64 bit)

Severity Not critical, but it is incrase REPL from 1 second to 8 seconds 😦 if i use the solution with adding --host as additional parameter.

[YugoCode]

Thank you very much for your help! 😊

I got it working 🥳 I have following setup on my local machine:

• Nginx as a gateway (Port 443)
• SvelteKit behind the gateway (Port 3000)
• An API server behind the gateway (Port 8080)

If you have a similar setup, here is what you need to do:

1. Adjust your nginx.conf

events {}
http {                                                                                                                               
     server {
         listen       443 ssl http2;                                                                                                  
                                                                                                  
         # Better set absolute paths to those two files                                                                                        ssl_certificate      ssl/localhost.crt;                                                                                      
         ssl/localhost.crt
         ssl/localhost.key;                                                                                                                                                                                                                                     ssl_session_cache    shared:SSL:1m;                                                                                          
         ssl_session_timeout  5m;                                                                                                                                                                                                                                           
         ssl_ciphers  HIGH:!aNULL:!MD5;                                                                                                        ssl_prefer_server_ciphers  on;                                                                                               
         
         # Important for HMR over websockets                                                                                          
         proxy_set_header Upgrade $http_upgrade;                                                                                      
         proxy_set_header Connection 'Upgrade';                                                                                       
         proxy_set_header Host $host;                                                                                                 
                                                                                                                                      
         location / {                                                                                                                 
           proxy_pass http://localhost:3000;                                                                                          
         }                                                                                                                            
                                                                                                                                      
         # Set this if you have a (node.js) server running for handling API calls                                                     
         location /api {                                                                                                              
           proxy_pass http://localhost:8080;                                                                                          
         }                                                                                                                            
     }                                                                                                                                
 }

Make sure to adjust the paths to your certificate and private key file. If you want to create a self-signed certificate for local testing, you can use this command:

sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout localhost.key -out localhost.crt

Don’t forget to reload your config after you have done the changes:

sudo nginx -s reload

2. Adjust your svelte.config.js

    kit: {
        ...
        vite: {
            server: {
                hmr: {
                    port: 443
                }
            }
        },
    }

1. Enjoy HMR on https://localhost

Just restart SvelteKit and you are good to go:

npm run dev -- --open

From now on you should only use https://localhost, because http://localhost:3000 won’t work with HMR.

*Thanks again everyone for your help ❤️

[annmarie-switzer]

I think next.169 broke something in relation to this. When I upgraded to next.169 this afternoon, the websocket could not be reached anymore and the page would endlessly reload. I reverted back to next.164 and everything is working again as intended.

Here are my svelte config file and docker compose file. Again, this works with next.164 but does not work with next.169:

svelte.config.js

import preprocess from 'svelte-preprocess';

import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess(),
    kit: {
        adapter: adapter(),
        ssr: false,
        target: '#svelte',
        vite: {
            server: {
                https: {
                    key: '/certs/key.pem',
                    cert: '/certs/cert.pem'
                },
                hmr: {
                    protocol: 'wss',
                    port: 24678
                }
            }
        }
    }
};

export default config;

docker-compose.yml

  ui:
    container_name: ui
    image: ui-${UI_MODE}
    build:
      context: ../ui
      dockerfile: Dockerfile.${UI_MODE}
    restart: always
    ports:
      - 24678:24678
    volumes:
      - ../ui/src/:/app/src
      - ../ui/static:/app/static
      - ./configs/certs/mycert.pem:/certs/cert.pem
      - ./configs/certs/mycert-key.pem:/certs/key.pem
    tty: true