React hot reload doesn't work in docker container

Question

I am trying to set up React with docker, but for some reason I cannot get the hot reload to work. Currently, if I create a file it recompiles, but if I change something in a file it does not. Also, I didn't change any packages or configuration files, the project was generated with npx create-react-app projectname --template typescript.

From researching this online I found out that I needed to add CHOKIDAR_USEPOLLING=true to a .env file, I tried this but it didn't work, I tried placing the .env in all directories in case I placed it in the wrong one. I also added it to the docker-compose.yml environment.

In addition to this, I also tried downgrading react-scripts to 4.0.3 because I found this, that also didn't work.

I also tried changing a file locally and then checking if it also changes inside the docker container, it does, so I'm pretty sure my docker related files are correct.

Versions

• Node 16.14
• Docker Desktop 4.5.1 (Windows)
• react 17.0.2
• react-scripts 5.0.0

Directory structure

project/
│   README.md
│   docker-compose.yml    
│
└───frontend/
    │   Dockerfile
    │   package.json
    │   src/
    │   ...

Dockerfile

FROM node:16.14-alpine3.14

WORKDIR /app

COPY package.json .
COPY package-lock.json .
RUN npm install 

CMD ["npm", "start"]

docker-compose.yml

services:
  frontend:
    build: ./frontend
    ports:
      - "3000:3000"
    volumes:
      - "./frontend:/app"
      - "/app/node_modules"
    environment:
      CHOKIDAR_USEPOLLING: "true"

Answer 1

If you are on Windows and use react-scripts 5.x.x or above, CHOKIDAR_USEPOLLING is not working. Make changes your package.json instead in the following way:

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