Doesn't work with docker container

[Cally99]

Versions

nuxt-vite: v0.1.1 nuxt: v2.15.7

Reproduction

To reproduce this error.

"devDependencies": { "@vue/test-utils": "^1.0.0-beta.11", "nuxt-vite": "^0.1.1", "browser-env": "^3.2.5", "eslint": "^4.19.1", "eslint-plugin-vue": "^4.0.0", "require-extension-hooks": "^0.3.2" },

frontend: build: context: ./frontend dockerfile: docker/Dockerfile.dev volumes:

• "./frontend:/app/"
• "/app/node_modules" ports:
• "3000:3000" environment:
• API_URI=http://backend:8000/api networks:
• main

FROM node:14.15.5

WORKDIR /app/

COPY . /app/

ENV SENTRY_DISABLED=true ENV HOST 0.0.0.0

EXPOSE 3000

ENTRYPOINT ["sh", "docker/start_dev.sh"]

!/bin/bash

npm rebuild node-sass npm config set save-prefix='' npm install npm install --save nuxt

npm run dev

run docker compose up -d

Description

Page keeps refreshing when running in docker container.

buildModules: [ // https://go.nuxtjs.dev/typescript 'nuxt-vite',

], build: { /* * Run ESLint on save / }, vite: { ssr: true, server: { fs: { strict: false } } } }

[BobbieGoede]

I had the same issue, the page keeps refreshing because vite tries to connect to websocket on port 24678 (default) in dev mode. You need to expose the port by adding - "24678:24678" to ports in your compose file.

[gilesbutler]

I also had the same issue but only exposing the 24678 port didn't work for me, I also had to add the following to my Vite config...

server: {
    hmr: {
      protocol: 'ws',
      host: 'localhost'
    }
  },

Taken from https://github.com/vitejs/vite/issues/3002 Thanks for the heads up re the port though @BobbieGoede 👍

[ROBJkE]

Had the same issue with Docker and a nuxt3 blank project. @BobbieGoede solution helped

So if you are faceing [vite] connecting... and [vite] server connection lost. polling for restart... in your console and you are using a docker setup, dont forget to expose port 24678 too

[rohrig]

I noticed with a fresh install exposing 24678 did the trick.

However, after installing tailwind css the error resumed.

Then creating avite.config.js with:

export default { server: { hmr: { protocol: 'ws', host: 'localhost' } }, } got things working smoothly again.

Thanks @BobbieGoede and @gilesbutler

[danpastori]

We had this working through docker using @gilesbutler 's config until we updated to Nuxt 3 RC 1:

nutxt.config.ts:

  vite: {
    server: {
      hmr: {
        protocol: 'ws',
        host: 'localhost'
      }
    }
  },

docker-compose.dev.yml:

version: '3.8'
services:
  node:
    volumes:
      - .:/usr/src/app:cached
    networks: 
      - roast-api_development
    ports: 
      - 24678:24678
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.roast.rule=Host(`roast.dev.test`)"
      - "traefik.http.routers.roast.entrypoints=websecure"
      - "traefik.http.routers.roast.tls=true"
      - "traefik.http.services.roast.loadbalancer.server.port=3000"
      - "traefik.http.services.roast.loadbalancer.server.scheme=http"
    command: "yarn dev"

networks:
  roast-api_development:
    external: true

Is anyone else having issues after upgrading to Nuxt 3 RC1?

[sebpalluel]

I have the same HMR issue with vite when running nuxt3 on Docker. It's reloading the page indefinitely. The port 24678 is open and the config seems right. This issue arise on both RC1 and RC2.

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    buildModules: ['@nuxtjs/stylelint-module', '@nuxtjs/eslint-module'],
    css: ['vuetify/styles'],
    build: {
        transpile: ['vuetify', '@apollo/client', 'ts-invariant/process']
    },
    vite: {
        server: {
            hmr: {
                protocol: 'ws',
                host: 'localhost'
            }
        }
    }
})

nuxt3.dockerfile

# Dockerfile
FROM node:16-alpine3.14

# create destination directory
RUN mkdir -p /usr/src/nuxt-app
WORKDIR /usr/src/nuxt-app

# update and install dependency
RUN apk update && apk upgrade
RUN apk add git

# copy the app, note .dockerignore
COPY package.json .
RUN yarn install
COPY . .
RUN yarn build

EXPOSE 3000

ENV NUXT_HOST=0.0.0.0
ENV NUXT_PORT=3000

CMD [ "yarn", "dev" ]

docker-compose.dev.yml

version: '3.9'

services:
  nuxt3:
    build:
      context: .
      dockerfile: nuxt3.dockerfile
    ports:
       - 3000:3000
       - 24678:24678

[sebpalluel]

The solution was to remove this config from the nuxt.config.ts:

server: {
    hmr: {
        protocol: 'ws'
        host: 'localhost'
    }
}

As long as you bind port 24678 to the 24678 port of your host you should see the vite hmr module as connected and it shouldn't loop.

The twist after that is to completely clear the cache of your browser as described in here: https://github.com/nuxt/nuxt.js/issues/11956

[nxmad]

+1 here. I have two exactly same configs for Nuxt (RC3) and pure Vite. Vite is working fine, Nuxt is not. Even if I set hmr: false it keeps infinite reloading. Nuxt is running inside docker container behind Traefik proxy.

defineConfig({
  server: {
    host: '0.0.0.0',
    hmr: {
      clientPort: 443,
    }
  },
})

defineNuxtConfig({
  vite: {
    server: {
      host: '0.0.0.0',
      hmr: {
        clientPort: 443,
      },
    }
  }
})

[Miksser]

Problem is not resolved in 3.0.0 RC6. Need to open 24678 port =(

[Cellarion]

On Mac computer, adding port 24678 in docker compose works fine, but changing to a computer with linux pop os, it does not work. I must stop and boot my docker container to see some changes. Furthermore there is infinite looping when I add the folowing lines in nuxt.config.ts :

vite: {
        plugins: [svgLoader()],
        server: {
            hmr: {
                protocol: 'ws',
                host: 'localhost'
            }
        }
    },

Firefox browser says it can't connect to 24678 port.

[SebastienHUGDELARAUZE]

When running Vite on Windows Subsystem for Linux (WSL) 2, if the project folder resides in a Windows filesystem, you'll need to set this option to { usePolling: true }. This is due to a WSL2 limitation with the Windows filesystem. (from Server Options - Vite)

export default defineNuxtConfig({
  vite: {
    server: {
      watch: { usePolling: true }
    }
  }
})

I had the issue that my project did not refresh when updating my source code when working in devcontainer (with Docker Desktop / Win10).

[overusdev]

Is this issue still being solved? Do you have any solution?

[m0dch3n]

I'm also encountering this issue.

Pure vite works great with

server: {
    hmr: {
      clientPort: 443,
    },

when proxying the docker container to https nginx

However in Nuxt it doesn't work...

What I found out, and which influences where the browser tries to connect to:

    hmr: {
      host: 'ip of docker container',
      clientPort: 443,
    },

makes the binding work, however the browser then tries to connect to 'ip of docker container':443/_nuxt/ (which does not work outside the container)

When changing to

    hmr: {
      host: '0.0.0.0',
      clientPort: 443,
    },

Binding works too, but the browser then tries to connect to 0.0.0.0:443/_nuxt/ (which does also not work)

When changing to

    hmr: {
      host: myhttpsdomain.com,
      clientPort: 443,
    },

the binding does no longer work, because the docker does not resolve my domain...

I could trick around, and make my domain resolve differently within the docker container (for example to the docker ip), but then I have further issues because the resolved ip is also used in other cases...

So I suppose the solution to this, is that hmr.host should not influence where the browser tries to connect to. It should simply take the same domain/ip it is loading the devserver.

[jaydrogers]

(Removed intentionally to prevent confusion between Nuxt 2 & Nuxt 3)

[danielroe]

@jaydrogers This is a module for nuxt 2. It sounds like you are running Nuxt 3 instead?

[jaydrogers]

@danielroe: Correct, we are on Nuxt 3. Sorry, I if I need to remove my previous comment and drop it on another issue, let me know 👍

[danielroe]

I would recommend raising it in the issue you linked or in another one on nuxt/framework. Ideally with a reproduction so Pooya or I can investigate further.