Nuxt development server continiously restarts with --https

[nandi95]

Environment

------------------------------
- Operating System: `Darwin`
- Node Version:     `v16.11.1`
- Nuxt Version:     `3.0.0-27274229.29599f0`
- Package Manager:  `npm@8.1.3`
- Bundler:          `Vite`
- User Config:      `publicRuntimeConfig`, `ssr`, `target`, `meta`, `build`, `css`, `buildModules`
- Runtime Modules:  `-`
- Build Modules:    `-`
------------------------------

Describe the bug

the development server seems to restart all the time

Reproduction

steps:

• install fresh project with nuxi init
• generate ssl key and certificate
• updated dev script to nuxi dev --host domain.test --https --ssl-key key.pem --ssl-cert cert.pem

Additional context

A similar issue has been described here: #12722
recreating the pkg lock and/or adding the std-env package does not help

Logs

No response

[pi0]

Additional context: Browser logs:

client.ts:28 WebSocket connection to 'wss://localhost:24678/_nuxt/' failed:

It seems a vite issue. You can use vite: false in nuxt.config as a workaround

Related: vitejs/vite#1925

[nandi95]

Hmm, I'm not getting any logs in the browser nor the terminal
this in fact works as expected with webpack

[pi0]

Hmm, I'm not getting any logs in the browser nor the terminal

They go away quickly you need to check "preserve logs" to see them 🙈

[pi0]

@nandi95 Can you please try this to see if resolves restart issue

export default defineNuxtConfig({
  vite: {
    server: {
      hmr: {
        protocol: 'ws'
      }
    }
  }
})

[nandi95]

Screen.Recording.2021-11-09.at.12.53.39.mov

there's nothing in the logs to preserve 😬

---

still the same with the vite config protocol set to websockets

[dbhagen]

Having a similar issue behind a Caddy reverse proxy.
Turning off Vite works:

npx nuxi info                   
Nuxt CLI v3.0.0-27274229.29599f0                                                                                                                                                 09:55:49
RootDir: /Users/danielhagen/Projects/cashstudio-nuxt3                                                                                                                            09:55:50
Nuxt project info:                                                                                                                                                               09:55:50

------------------------------
- Operating System: `Darwin`
- Node Version:     `v14.18.1`
- Nuxt Version:     `3.0.0-27274229.29599f0`
- Package Manager:  `yarn@1.22.17`
- Bundler:          `Webpack`
- User Config:      `vite`
- Runtime Modules:  `-`
- Build Modules:    `-`
------------------------------

Console log

Navigated to https://localhost.test.domain/
runtime-core.esm-bundler.js?5c40:893 <Suspense> is an experimental feature and its API will likely change.
client.js?aa7f:95 [HMR] connected

With Vite in WSS mode:

npx nuxi info                                 
Nuxt CLI v3.0.0-27274229.29599f0                                                                                                                                                 09:59:55
RootDir: /Users/danielhagen/Projects/cashstudio-nuxt3                                                                                                                            09:59:55
Nuxt project info:                                                                                                                                                               09:59:55

------------------------------
- Operating System: `Darwin`
- Node Version:     `v14.18.1`
- Nuxt Version:     `3.0.0-27274229.29599f0`
- Package Manager:  `yarn@1.22.17`
- Bundler:          `Vite`
- User Config:      `-`
- Runtime Modules:  `-`
- Build Modules:    `-`
------------------------------

Console log

Navigated to https://localhost.test.domain/
client.ts:22 [vite] connecting...
runtime-core.esm-bundler.js:893 <Suspense> is an experimental feature and its API will likely change.
client.ts:28 WebSocket connection to 'wss://localhost.test.domain:24678/_nuxt/' failed: 
(anonymous) @ client:188
client.ts:224 [vite] server connection lost. polling for restart...

Running Vite in a non-secure WebSocket, as mentioned above by @pi0, results in an error.

Navigated to https://localhost.test.domain/
client.ts:22 [vite] connecting...
client.ts:28 Mixed Content: The page at 'https://localhost.test.domain/' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://localhost.test.domain:24678/_nuxt/'. This request has been blocked; this endpoint must be available over WSS.
(anonymous) @ client.ts:28
2localhost.test.domain/:1 Uncaught DOMException: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.
    at https://localhost.test.domain/_nuxt/@vite/client:188:16

[dbhagen]

Actually, the more I thought about it, the thing that was missing was redirecting to the right host for WebSocket. I was able to resolve the error using this in the nuxt.config.ts:

import { defineNuxtConfig } from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  vite: {
    server: {
      hmr: {
        protocol: 'ws',
        host: 'localhost'
      }
    }
  }
})

Still seems like there's an error when Caddy (or the HTTPS flag) tries to proxy the WebSocket back. But at least for now, this is a workaround.

[nandi95]

that doesn't seem to work when using custom configuration like
nuxi dev --host website.test --https --ssl-key key.pem --ssl-cert cert.pem --port 3000
Tried with updating the server key with the values from the command arguments to no avail

[misaon]

I have a Docker stack and an Nginx reverse proxy in it, which proxy pass "/" to "http://client:3000" when i visit https://web.localhost domain. So....

If I use Nuxt3 without Docker and reverse proxy, go to http://localhost:3000, nuxt.config vite->server->hmr is loaded properly 👍🏼. If I go to https://web.localhost vite->server->hmr options are ignored! 👎🏼 😢

Some idea?

[vicvillalobos]

I have a Docker stack and an Nginx reverse proxy in it, which proxy pass "/" to "http://client:3000" when i visit https://web.localhost domain. So....

If I use Nuxt3 without Docker and reverse proxy, go to http://localhost:3000, nuxt.config vite->server->hmr is loaded properly 👍🏼. If I go to https://web.localhost vite->server->hmr options are ignored! 👎🏼 😢

Some idea?

In case anyone stumbles upon this issue, I solved it by exposing the 24678 port on docker.

[JamieMcDonnell]

I found a simple solution to this in my nuxt.config.ts - my vite settings now look like this:

vite: {
    server: {
      port: 443,
      https: true,
      hmr: {
        protocol: 'wss'
      }
    }
  }

It was protocol: 'wss' which did the trick - it needs to be secure, as it is running on https...

[ol1s]

In case anyone stumbles upon this issue, I solved it by exposing the 24678 port on docker.

Any way of configuring custom ports - I believe you can on Vite but not sure if this translates onto nitro?

Edit: yes, this config worked for me:

export default defineNuxtConfig({
  vite: {
    server: {
      hmr: {
        port: 3001,
        clientPort: 3001
      }
    }
  }
})

[Vejron]

When running nuxi in https you also need to tell vite where the certificates is. Otherwise you get the constant refreshing issue.
In nuxt config something like this should suffice

vite: {
    server: {
      https: {
        key: fs.readFileSync('cert/localhost+2-key.pem'),
        cert: fs.readFileSync('cert/localhost+2.pem'),
      },
      hmr: {
        protocol: 'wss'
      }
    }
  },

[JamieMcDonnell]

You might need to use "sudo" when starting the server too, at least I did.

…

On Wed, 18 May 2022, 15:24 Vejron, ***@***.***> wrote: When running *nuxi* in https you also need to tell *vite* where the certificates is. Otherwise you get the constant refreshing issue. In nuxt config something like this should suffice vite: { server: { https: { key: fs.readFileSync('cert/localhost+2-key.pem'), cert: fs.readFileSync('cert/localhost+2.pem'), }, hmr: { protocol: 'wss' } } }, — Reply to this email directly, view it on GitHub <#12748>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAE6ENDDKQIEWFK3Q7XPK7DVKTVQJANCNFSM5HVE4MPQ> . You are receiving this because you commented.Message ID: ***@***.***>

[LaCocoRoco]

If anyone uses Caddy Revers Proxy and Https in an Development Environment, this fixed my problem.

Config Nuxt

import { defineNuxtConfig } from 'nuxt';

export default defineNuxtConfig({
  vite: {
    server: {
      hmr: {
        protocol: 'wss',
        clientPort: 443,
      },
    },
  },
});

Config Caddy

dev.domain.com {
  @websockets {
    header Connection Upgrade
    header Upgrade websocket
  }
  
  reverse_proxy @websockets localhost:24678
  reverse_proxy localhost:3000
}

[kelyamany]

I have a Docker stack and an Nginx reverse proxy in it, which proxy pass "/" to "http://client:3000" when i visit https://web.localhost domain. So....
If I use Nuxt3 without Docker and reverse proxy, go to http://localhost:3000, nuxt.config vite->server->hmr is loaded properly 👍🏼. If I go to https://web.localhost vite->server->hmr options are ignored! 👎🏼 😢
Some idea?

In case anyone stumbles upon this issue, I solved it by exposing the 24678 port on docker.

In case anyone is using a vscode devcontainer, you'll probably encounter this problem. Thanks for the simple solution

[shtse8]

vite team fixed the issue.

[nandi95]

Now just need to wait until vite reaches v3 and nuxt starts to use it.
Hopefully this websocket protocol infer will fix it but in the meantime, I figured that this error only occurs when I add the argument --host domain.test. Then it refreshes. HRM and everything works fine with all other arguments.
Also worth noting that deleted the .nuxt folder when trying which argument breaks it, as if I left it, it teased out this issue: #14056

[nandi95]

with RC-7 out (vite upgraded) there is still an issue. It just keep polling.
Firefox won't connect to wss on a different port. If I set the port to same as website, it restarts a couple times but websocket isn't in the network tab and hmr doesn't work.
if I set the protocol to wss manually it doesn't restart but it doesn't set up hmr either.
Reproduction: https://github.com/nandi95/nuxt-starter

[TheDutchCoder]

I'm dealing with a tangentially related issue, where if you use https and a custom host name (say local.mydomain.com mapped to 127.0.0.1 through your hosts file), then HRM fails on the ws://local/mydomain.com connection complaining about having to use wss. If you actually set wss as the protocol it will also not work:

As an aside, the typings on defineNuxtConfig for vite are incomplete and will throw errors when using properties like server:

Edit: also, how do people even get vite.server options to work at all? Only certain things seem to be picked up, others aren't.

For example vite.server.host does nothing, but vite.server.hrm.port does 🤔

[danielroe]

(The vite.server options host and port should not be configured directly because they need to be set by Nuxt. You configure them with --port and --host command line arguments.)

[nandi95]

Even when configuring using the cli it's still an issue. See the reproduction.

[danielroe]

Not disputing that, just explaining why we don't want configuring vite.server.host directly :-)

[TheDutchCoder]

Okay, so this might either be a Vite internal issue, or the way vite config is used in Nuxt.
Setting something like

    server: {
      hmr: {
        host: 'local.reinier.remx.xyz',
        protocol: 'wss',
      },
    },

Has no effect, it just says the websocket has failed with no specific message:

[nandi95]

After nuxt/framework#7680 this now works. with a custom certificate and key the host and wss will now work over https and wss.

However, when using only --https --host without the key and certificate the site will not load:

Is this worth reopening as a new issue?
Is this perhaps an issue within unjs/listhen?

[danielroe]

@nandi95 Good idea. I'll close this one as resolved, and yes, I would appreciate you raising this as a new issue. 🙏

[TheDutchCoder]

After nuxt/framework#7680 this now works. with a custom certificate and key the host and wss will now work over https and wss.

However, when using only --https --host without the key and certificate the site will not load:

Is this worth reopening as a new issue? Is this perhaps an issue within unjs/listhen?

I have the same issue and tried to resolve it with pi0 yesterday on discord.

It works for him, but I have a suspicion that he, at some point, added the certificates to his OS.

Chrome blocks unsigned certificates.

This was the issue I reported: #14987

@danielroe maybe worth reopening?

[pi0]

added the certificates to his OS.

Each time you restart nuxi, there is a new root certificate chain generated.

I will try to investigate on a couple of more browsers and operating systems.

[danielroe]

On Chrome you can override :

But there's no obvious way to override in FF.

[nandi95]

I think on chrome you can override but the page will stil not work in terms of wss or lazy loading?
Can't remember. I'll create an issue discussed in #12748 and test the above later when I have time.

[pi0]

@nandi95 Please try on RC.11. In previous RCs, HTTPS support had two main issues:

• HTTPS Certificate wasn't secure enough to be able bypass in chrome (FF seems needs other changes)
• HMR port serving ws:// could not be reached from secure localhost neither we were sharing same certificate (that is bypassed in chrome).

[Reivax47]

#12748
This workaround works for me, but only with Chrome. Firefox can't connect and I get the message 'server connection lost. polling for restart'. I tried with the 'HelloWorld' Nuxt3 app. Caddy and Nuxt app are dockerized.

If I use a Vite app (without Nuxt3), Vite HMR works fine...

On the left : Chrome. On the right : Firefox.

About my config :

Nuxi 3.0.0                                                                                                                                                             08:07:24
                                                                                                                                                                       08:07:25
RootDir: /root/front                                                                                                                                                   08:07:25
Nuxt project info:                                                                                                                                                     08:07:25

------------------------------
- Operating System: `Linux`
- Node Version:     `v16.18.1`
- Nuxt Version:     `3.0.0`
- Nitro Version:    `1.0.0`
- Package Manager:  `npm@8.19.2`
- Builder:          `vite`
- User Config:      `vite`
- Runtime Modules:  `-`
- Build Modules:    `-`
------------------------------

The Nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
vite:{
        server: {
        hmr:{
                        protocol: 'wss',
                        clientPort: 443,
        },
  },
},
})

The Caddyfile :

                                                                            
komelia.fr {

  @websockets {
    header Connection Upgrade
    header Upgrade websocket
  }

        reverse_proxy @websockets front:24678
        reverse_proxy front:3000

}

NuxtApp docker file :

#Front
FROM node:16.18-bullseye
RUN apt -y update
RUN apt -y upgrade
RUN apt-get -y install  curl vim


# Montage des documents partagés
COPY ./nuxt-app/ /root/front/
WORKDIR /root/front
RUN npm install

ENV NUXT_HOST=0.0.0.0
ENV NUXT_PORT=3000
CMD ["npm", "run", "dev"]

As it's works fine with Chrome, I'm guessing Caddyfile is allright... ?
I'm running the app with " npm run dev".
I'm stuck at this point.
Thanks !

[tasiotas]

@Reivax47
Try this config, it works well for me in Dockerizer enviro.

nuxt.config.ts

  vite: {
    server: {
      hmr: {
        protocol: 'wss',
        clientPort: 443,
        path: 'hmr/',
      },
    },
}

Caddyfile

localhost {
	tls /certs/localhost.crt /certs/localhost.key # up to you how you handle certs

	handle /_nuxt/hmr/ {
		reverse_proxy http://nuxt:24678 # nuxt is the name of my service in docker-compose.yml
	}

	handle {
		reverse_proxy http://nuxt:3000
	}

}

[Reivax47]

@tasiotas That did the tricks !
Thanks a lot.

[rrolla]

Thanks, @tasiotas with your configuration I manage to get it working also in nuxt3 with traefik

nuxt.config.ts

  vite: {
    server: {
      hmr: {
        protocol: 'wss',
        port: 22300,
        clientPort: 443,
        path: 'hmr/',
        timeout: 3,
      },
    },
  },

Docker configuration most important is this

traefik.http.routers.vitesocket.rule=Host(`docker.dev.gradio.lv`) && PathPrefix(`/_nuxt/hmr/`)

And to expose two ports, otherwise traefik cannot create new service for each port

docker-compose.yml

  gradiohead:
    container_name: gradio_head
    hostname: v5.docker.dev.gradio.lv
    image: node:14-alpine
    labels:
      - traefik.enable=true
      - traefik.http.routers.gradiohead_http.service=gradiohead
      - traefik.http.routers.gradiohead_http.rule=Host(`docker.dev.gradio.lv`, `v5.docker.dev.gradio.lv`)
      - traefik.http.routers.gradiohead_http.entrypoints=http
      - traefik.http.routers.gradiohead_http.middlewares=redirect-to-https

      - traefik.http.middlewares.redirect-to-https.redirectscheme.scheme=https
      - traefik.http.routers.gradiohead.service=gradiohead
      - traefik.http.services.gradiohead.loadbalancer.server.port=3000
      - traefik.http.routers.gradiohead.rule=Host(`docker.dev.gradio.lv`, `v5.docker.dev.gradio.lv`)
      - traefik.http.routers.gradiohead.entrypoints=https
      - traefik.http.routers.gradiohead.tls=true

      - traefik.http.routers.vitesocket.service=vitesocket
      - traefik.http.services.vitesocket.loadbalancer.server.port=22300
      - traefik.http.routers.vitesocket.rule=Host(`docker.dev.gradio.lv`) && PathPrefix(`/_nuxt/hmr/`)
      - traefik.http.routers.vitesocket.entrypoints=http,https
      - traefik.http.routers.vitesocket.tls=true
    expose:
      - 3000
      - 22300
    command: >
        /bin/sh -c "yarn && yarn dev"

And you will get response status 101

[pi0]

PR welcome to improve docs for reverse-proxy (nginx, traefik) in development.

[rrolla]

PR welcome to improve docs for reverse-proxy (nginx, traefik) in development.

@pi0 can you please point me in which section of docs I can add this example?

[rrolla]

Looks like that from version 3.7.1 to 3.7.2 websocket config is changed to hmr (hot module replacement) v3.7.1...v3.7.2

previously it was connecting to

wss://docker.dev.gradio.lv/_nuxt/hmr/

because we setted in nuxt.config.ts vite.server.hmr.path

starting from version 3.7.2 looks like path not work anymore so it connects to

wss://docker.dev.gradio.lv/_nuxt/

To get it work with traefik loadbalancer i can completely remove two parts from previous config #12748 (comment):

nuxt.config.ts

remove vite.server eg

  vite: {
    define: { 'process.env.DEBUG': false },
    },
  },

docker-compose.yml

remove vitesocket stuff

  gradiohead:
    container_name: gradio_head
    hostname: v5.docker.dev.gradio.lv
    image: node:14-alpine
    labels:
      - traefik.enable=true
      - traefik.http.routers.gradiohead_http.service=gradiohead
      - traefik.http.routers.gradiohead_http.rule=Host(`docker.dev.gradio.lv`, `v5.docker.dev.gradio.lv`)
      - traefik.http.routers.gradiohead_http.entrypoints=http
      - traefik.http.routers.gradiohead_http.middlewares=redirect-to-https

      - traefik.http.middlewares.redirect-to-https.redirectscheme.scheme=https
      - traefik.http.routers.gradiohead.service=gradiohead
      - traefik.http.services.gradiohead.loadbalancer.server.port=3000
      - traefik.http.routers.gradiohead.rule=Host(`docker.dev.gradio.lv`, `v5.docker.dev.gradio.lv`)
      - traefik.http.routers.gradiohead.entrypoints=https
      - traefik.http.routers.gradiohead.tls=true

    expose:
      - 3000
    command: >
        /bin/sh -c "yarn && yarn dev"

[Drew-Macgibbon]

Using Nuxt 3.10.3 with Docker on Windows.
HMR wasn't working for me out of the box (multiple projects with different versions of Nuxt).

For me the solution was to add this:

nuxt.config.ts

 $development: {
    vite: {
      server: {
        watch: {
          usePolling: true,
          interval: 1000, // set preference
        },
      },
    },
  },

Dockerfile

EXPOSE 3000 24678
CMD rm -rf /tmp/nitro && npm run dev

docker-compose.yml

 ports:
      - 3000:3000
      - 24678:24678
  environment:
      - HOST=0.0.0.0

Make sure to run docker-compose up --build to force a rebuild

[lafllamme]

@Drew-Macgibbon

I stumbled on the same issue.

My docker-compose also contains the same details.

HMR works for components, however, editing and creating changes under /pages and /server for api request or page views is not working for me inside docker, including mac. (See here)

Changes for the routing or api endpoints are not updating unless I restart my docker or dev server, this is very annoying.
Did you experience a similar issue?

[RohitKV1n0d]

For me deleting and reinstalling packages worked.

rm -rf node_modules package-lock.json && npm install

[allusernamestakenexceptthis]

In my case, timeout: 3, solved the problem. / docker with wsl2