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 vitejs/vite#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 a vite.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: nuxt/nuxt#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?

[danielroe]

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

[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.