🐋

【Docker】Reactのホットリロードが効かない対処法

2024/04/29に公開

Docker

環境

Windows 11
Docker for windows
React(Typescript)

状況

Dockerfileとdocker-compose.yml

docker compose upを実行するために準備したファイル。

Dockerfile

FROM node:22-alpine3.18

docker-compose.yml

version: "4"
services:
  frontend:
    ~省略~
    ports:
      - "3000:3000"
    volumes:
      - ./front:/front
    working_dir: /front
    environment:
      - CHOKIDAR_USEPOLLING=true  # ←試したこと
    command: npm run start
    tty: true

試したこと

上記のdocker-compose.ymlのenvironmentに、CHOKIDAR_USEPOLLING=trueを追加してみてください。と多くの技術書にあったのでとりあえず追加して実行。

コンテナの再起動や、ポートの競合が無いかはもちろん確認した状態です。

解決方法

package.jsonのdependencies直下にあるreact-scriptsのバージョンが、5以上の場合はCHOKIDAR_USEPOLLING=trueを追加してもホットリロードには効果が無いようです。

私のpackage.json

package.json

"name": "front",
"version": "0.1.0",
"private": true,
"dependencies": {
  ~省略~
  "react-scripts": "5.0.1", // ←バージョン5以上
  ~省略~
},

これで解決

package.jsonの"scripts"を以下のように変更する。

"scripts": {
  "start": "WATCHPACK_POLLING=true react-scripts start",
  ~省略~
},