45
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【Docker】Reactでホットリロードができない

Last updated at Posted at 2022-06-06

結構な時間詰まってしまったので、備忘録として残しておきます・・・

【環境】

React(17.0.2)
Docker for windows
TypeScript(4.6.2)
Windows

【状況】

localhostを起動して、tsxファイルを上書きしても
ターミナルが動かない。
ホットリロードが起動しないので、毎回npm startをしなければならない・・・

【試したこと】

記事で多かったのは下記の記載。しかし効果無

.env
CHOKIDAR_USEPOLLING=true
docker-conpose.yml
    environment:
      - ....
      - CHOKIDAR_USEPOLLING=true

【実際の解決策】

色々調査した結果、Windowsを使用していて、react-scripts 5.xx以降を使用している場合、CHOKIDAR_USEPOLLINGは機能しないとのこと。
下記の記載で、ホットリロードが動きました。感動した。。

package.json
"scripts": {
    "start": "WATCHPACK_POLLING=true react-scripts start",
    "build": ...
  },

【参考記事】

React hot reload doesn't work in docker container

45
17
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
45
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?