Vite hmr does not work in Docker #3161

kirillkumma · 2021-04-26T13:52:34Z

Describe the bug

I'm trying to run my app inside Docker container. It has three services, but I have problems only with web-app service i.e. Vite-Vue app.
I tried to run application and got this error:

web-app     | > web-app@0.0.0 dev
web-app     | > vite --host 0.0.0.0
web-app     | 
web-app     | failed to load config from /usr/local/web-app/vite.config.js
web-app     | error when starting dev server:
web-app     | Error: spawn Unknown system error -8
web-app     |     at ChildProcess.spawn (node:internal/child_process:415:11)
web-app     |     at Object.spawn (node:child_process:609:9)
web-app     |     at ensureServiceIsRunning (/usr/local/web-app/node_modules/esbuild/lib/main.js:1406:29)
web-app     |     at Object.build (/usr/local/web-app/node_modules/esbuild/lib/main.js:1334:26)
web-app     |     at bundleConfigFile (/usr/local/web-app/node_modules/vite/dist/node/chunks/dep-60ed4f87.js:46422:34)
web-app     |     at loadConfigFromFile (/usr/local/web-app/node_modules/vite/dist/node/chunks/dep-60ed4f87.js:46399:35)
web-app     |     at resolveConfig (/usr/local/web-app/node_modules/vite/dist/node/chunks/dep-60ed4f87.js:46014:34)
web-app     |     at createServer (/usr/local/web-app/node_modules/vite/dist/node/chunks/dep-60ed4f87.js:69157:26)
web-app     |     at CAC.<anonymous> (/usr/local/web-app/node_modules/vite/dist/node/cli.js:13885:30)
web-app exited with code 1

Then, I realized that this happen because of esbuild's binary file inside my node_modules. So, I deleted all modules from node_modules directory, created volume for this directory in docker compose and ran docker compose run web-app npm install to make sure that I have container's node_modules locally with esbuild module built for container's image.
It fixed the bug, Vite successfully runs in docker:

web-app_run_4f31dff33b7e  | > web-app@0.0.0 dev
web-app_run_4f31dff33b7e  | > vite --host 0.0.0.0
web-app_run_4f31dff33b7e  | 
web-app_run_4f31dff33b7e  | Pre-bundling dependencies:
web-app_run_4f31dff33b7e  |   vue
web-app_run_4f31dff33b7e  |   vue-router
web-app_run_4f31dff33b7e  | (this will be run only when your dependencies or config have changed)
web-app_run_4f31dff33b7e  | 
web-app_run_4f31dff33b7e  |   vite v2.2.2 dev server running at:
web-app_run_4f31dff33b7e  | 
web-app_run_4f31dff33b7e  |   > Local:    http://localhost:3000/
web-app_run_4f31dff33b7e  |   > Network:  http://172.31.0.4:3000/
web-app_run_4f31dff33b7e  | 
web-app_run_4f31dff33b7e  |   ready in 3487ms.

But it doesn't recompile when I change source files even though I have volume mounted to docker container

package.json:

{
  "name": "web-app",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite --host 0.0.0.0",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "^3.0.5",
    "vue-router": "^4.0.6"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.2.1",
    "@vue/compiler-sfc": "^3.0.5",
    "eslint": "^7.25.0",
    "eslint-plugin-vue": "^7.9.0",
    "prettier": "^2.2.1",
    "vite": "^2.1.5"
  }
}

vite.config.js:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
});

Dockerfile:

FROM node:alpine
WORKDIR /usr/local/web-app
COPY ./package*.json ./
RUN npm install
COPY ./ ./
RUN node node_modules/esbuild/install.js
CMD [ "npm", "run", "dev" ]

docker-compose.yml:

version: '3'
services:
  postgres:
    container_name: postgres
    image: postgres:alpine
    environment:
      - POSTGRES_USER=$POSTGRES_USER
      - POSTGRES_PASSWORD=$POSTGRES_PASSWORD
      - POSTGRES_DB=$POSTGRES_DATABASE
    ports:
      - '5432:5432'
    volumes:
      - ./postgres:/var/lib/postgresql/data
  server-api:
    container_name: server-api
    build: ./server-api
    depends_on:
      - postgres
    ports:
      - '5000:80'
    volumes:
      - ./server-api:/usr/local/server-api
    environment:
      - SERVER_PORT=$SERVER_PORT
      - DEBUG=$DEBUG
      - POSTGRES_USER=$POSTGRES_USER
      - POSTGRES_PASSWORD=$POSTGRES_PASSWORD
      - POSTGRES_DATABASE=$POSTGRES_DATABASE
      - POSTGRES_HOST=$POSTGRES_HOST
      - SECRET_KEY=$SECRET_KEY
  web-app:
    container_name: web-app
    build: ./web-app
    depends_on:
      - server-api
    ports:
      - '3000:3000'
    volumes:
      - ./web-app:/usr/local/web-app
      - ./web-app/node_modules:/usr/local/web-app/node_modules
    environment:
      - VITE_APP_SERVER_HOST=$VITE_APP_SERVER_HOST

Reproduction

Github Repo

Pull repo's develop branch
Run docker compose --env-file .env.development up
If you have first error, make sure to have container's node_modules installed locally with
docker compose run web-app npm install and rerun command from second step

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

System:
    OS: macOS 11.2.3
    CPU: (4) x64 Intel(R) Core(TM) i5-4258U CPU @ 2.40GHz
    Memory: 160.86 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.13.0 - ~/.nvm/versions/node/v15.13.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v15.13.0/bin/yarn
    npm: 7.10.0 - ~/.nvm/versions/node/v15.13.0/bin/npm
  Browsers:
    Brave Browser: 90.1.23.73
    Safari: 14.0.3

Used package manager: npm

Logs

web-app     | > web-app@0.0.0 dev
web-app     | > vite --host 0.0.0.0 --debug
web-app     | 
web-app     | 2021-04-26T13:49:18.348Z vite:config bundled config file loaded in 1452ms
web-app     | 2021-04-26T13:49:18.381Z vite:config using resolved config: {
web-app     |   plugins: [
web-app     |     'vite:pre-alias',
web-app     |     'alias',
web-app     |     'vite:dynamic-import-polyfill',
web-app     |     'vite:resolve',
web-app     |     'vite:html',
web-app     |     'vite:css',
web-app     |     'vite:esbuild',
web-app     |     'vite:json',
web-app     |     'vite:wasm',
web-app     |     'vite:worker',
web-app     |     'vite:asset',
web-app     |     'vite:vue',
web-app     |     'vite:define',
web-app     |     'vite:css-post',
web-app     |     'vite:client-inject',
web-app     |     'vite:import-analysis'
web-app     |   ],
web-app     |   server: { host: '0.0.0.0' },
web-app     |   define: { __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false },
web-app     |   ssr: { external: [ 'vue', '@vue/server-renderer' ] },
web-app     |   configFile: '/usr/local/web-app/vite.config.js',
web-app     |   configFileDependencies: [ 'vite.config.js' ],
web-app     |   inlineConfig: {
web-app     |     root: undefined,
web-app     |     base: undefined,
web-app     |     mode: undefined,
web-app     |     configFile: undefined,
web-app     |     logLevel: undefined,
web-app     |     clearScreen: undefined,
web-app     |     server: { host: '0.0.0.0' }
web-app     |   },
web-app     |   root: '/usr/local/web-app',
web-app     |   base: '/',
web-app     |   resolve: { dedupe: undefined, alias: [ [Object] ] },
web-app     |   publicDir: '/usr/local/web-app/public',
web-app     |   cacheDir: '/usr/local/web-app/node_modules/.vite',
web-app     |   command: 'serve',
web-app     |   mode: 'development',
web-app     |   isProduction: false,
web-app     |   build: {
web-app     |     target: [ 'es2019', 'edge18', 'firefox60', 'chrome61', 'safari11' ],
web-app     |     polyfillDynamicImport: true,
web-app     |     outDir: 'dist',
web-app     |     assetsDir: 'assets',
web-app     |     assetsInlineLimit: 4096,
web-app     |     cssCodeSplit: true,
web-app     |     sourcemap: false,
web-app     |     rollupOptions: {},
web-app     |     commonjsOptions: { include: [Array], extensions: [Array] },
web-app     |     minify: 'terser',
web-app     |     terserOptions: {},
web-app     |     cleanCssOptions: {},
web-app     |     write: true,
web-app     |     emptyOutDir: null,
web-app     |     manifest: false,
web-app     |     lib: false,
web-app     |     ssr: false,
web-app     |     ssrManifest: false,
web-app     |     brotliSize: true,
web-app     |     chunkSizeWarningLimit: 500,
web-app     |     watch: null
web-app     |   },
web-app     |   env: {
web-app     |     VITE_APP_SERVER_HOST: 'server-api',
web-app     |     BASE_URL: '/',
web-app     |     MODE: 'development',
web-app     |     DEV: true,
web-app     |     PROD: false
web-app     |   },
web-app     |   assetsInclude: [Function: assetsInclude],
web-app     |   logger: {
web-app     |     hasWarned: false,
web-app     |     info: [Function: info],
web-app     |     warn: [Function: warn],
web-app     |     error: [Function: error],
web-app     |     clearScreen: [Function: clearScreen]
web-app     |   },
web-app     |   createResolver: [Function: createResolver]
web-app     | }
web-app     | 2021-04-26T13:49:18.513Z vite:deps Hash is consistent. Skipping. Use --force to override.
web-app     | 
web-app     |   vite v2.2.2 dev server running at:
web-app     | 
web-app     |   > Local:    http://localhost:3000/
web-app     |   > Network:  http://192.168.0.4:3000/
web-app     | 
web-app     |   ready in 2234ms.

The text was updated successfully, but these errors were encountered:

kirillkumma · 2021-04-26T17:58:23Z

I have just fixed the issue, I'm not sure, but I think it was because I haven't properly mounted my node_modules.
Now my docker-compose.yml looks like this

version: '3'
services:
  postgres:
    container_name: postgres
    image: postgres:alpine
    environment:
      - POSTGRES_USER=$POSTGRES_USER
      - POSTGRES_PASSWORD=$POSTGRES_PASSWORD
      - POSTGRES_DB=$POSTGRES_DATABASE
    ports:
      - '5432:5432'
    volumes:
      - ./postgres:/var/lib/postgresql/data
  server-api:
    container_name: server-api
    build: ./server-api
    depends_on:
      - postgres
    ports:
      - '5000:80'
    volumes:
      - ./server-api:/usr/local/server-api
    environment:
      - SERVER_PORT=$SERVER_PORT
      - DEBUG=$DEBUG
      - POSTGRES_USER=$POSTGRES_USER
      - POSTGRES_PASSWORD=$POSTGRES_PASSWORD
      - POSTGRES_DATABASE=$POSTGRES_DATABASE
      - POSTGRES_HOST=$POSTGRES_HOST
      - SECRET_KEY=$SECRET_KEY
  web-app:
    container_name: web-app
    build: ./web-app
    depends_on:
      - server-api
    ports:
      - '3000:3000'
    volumes:
      - ./web-app:/usr/local/web-app
      - /usr/local/web-app/node_modules
    environment:
      - VITE_APP_SERVER_HOST=$VITE_APP_SERVER_HOST

kirillkumma added the pending triage label Apr 26, 2021

kirillkumma changed the title ~~Vite hmr does not works in Docker~~ Vite hmr does not work in Docker Apr 26, 2021

Shinigami92 added the feat: hmr label Apr 26, 2021

kirillkumma closed this as completed Apr 26, 2021

github-actions bot locked and limited conversation to collaborators Jul 16, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vite hmr does not work in Docker #3161

Vite hmr does not work in Docker #3161

kirillkumma commented Apr 26, 2021

kirillkumma commented Apr 26, 2021

Vite hmr does not work in Docker #3161

Vite hmr does not work in Docker #3161

Comments

kirillkumma commented Apr 26, 2021

Describe the bug

Reproduction

System Info

Logs

kirillkumma commented Apr 26, 2021