11

I'm creating a React app with docker in WSL2 and create-react-app and everything seems to be working fine except the app is not updating with changes in the code. I mean, when I make a change in the code, the browser should update the changes automatically, but it doesn't and I have to restart the container to see them. I added CHOKIDAR_USEPOLLING=true in ENV but it's not working either. These are the configuration files:

dockerfile

# pull official base image
FROM node:16.13.1

# set working directory
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install app dependencies

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

# add app
COPY . ./

# start app
CMD ["npm", "start"]

docker-compose.yml

services:
  react:
    build: ./frontend
    command: npm start
    ports:
      - 3000:3000
    volumes: 
      - ./frontend:/app
    env_file:
      - 'env.react'

env.react

CHOKIDAR_USEPOLLING=true

package.json

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "mdbreact": "^5.2.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-painter": "^0.4.0",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "sass": "^1.45.1",
    "web-vitals": "^2.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Can you see what I'm doing wrong? Thanks!

11
  • "except the app is not updating with changes" What do you mean by that. What changes, made where? How should app change to what action.
    – Misieq
    Commented Dec 26, 2021 at 17:35
  • I mean, when I make a change in the code, the browser should update the changes automatically, but it doesn't . I think it's called hot reload. Commented Dec 26, 2021 at 17:39
  • I'm not quite sure if that is possible with containers. I know its possible for example when you're dealing with java and IntelliJ and youre having the servers run locally. But i have never seen anyone make it work when a container technology is used. As far as i see you are trying it with a volume, but as soon as you rebuild, the application file gets probably refreshed locally but the volume is still the same.
    – Manu
    Commented Dec 26, 2021 at 18:58
  • spa hot-reload features is for development stage not for production stage. Share us the package.json
    – JRichardsz
    Commented Dec 26, 2021 at 21:31
  • 1
    I generally directly use Node for this sort of development, instead of trying to convince Docker that it wants to escape its normal filesystem isolation. This setup isn't really using any of Docker's capabilities (you don't have an immutable reproducible image, the front-end application can't use Docker networking) and it's not clear what benefit you get from Docker here.
    – David Maze
    Commented Dec 26, 2021 at 21:31

6 Answers 6

29

CHOKIDAR_USEPOLLING will no longer work in react-scripts ^5, as Webpack started using its own filesystem watcher (Watchpack) as a replacement for Chokidar, try:

environment:
  - WATCHPACK_POLLING=true
3
  • 1
    It's also no working on Ubuntu 20.04 (but your fix worked - thanks!) Commented Nov 4, 2022 at 17:05
  • Sorry, I came back some years later... It is still not working for me, could you share your Dockerfile? Commented Sep 21, 2023 at 11:54
  • 1
    Oh, nothing, one minute after writing it is working... :D Commented Sep 21, 2023 at 11:57
1

The problem is with WSL2, as it's said in this answer www.github.com/microsoft/WSL/issues/6255#issuecomment-730701001: "If it is in the Windows file system, I believe you're running into the fact that the Plan 9 server in WSL 2 does not support file watching on Windows files. As a workaround I'd recommend you place your files into the Linux file system". I moved the files to \\wsl$\Ubuntu\home\user and now the reload is working fine. I also stopped using Docker with React and now I directly use Node, as recommended in the comments.

Note that I was having the same issue with Node alone, with files outside the Linux file system.

1

Add this enviroment variable:

environment:
      - CHOKIDAR_USEPOLLING=true
2
  • 1
    I already tried that without success, as mentioned in the question statement. Commented May 4, 2022 at 9:32
  • Not an answer but a workaround. You can use VSCODE to attach to a remote container. In other words it attaches to the React App you're working on. So, it refreshes with every change like normal. Here's instructions: code.visualstudio.com/docs/remote/attach-container. Commented May 27, 2022 at 11:06
0

I'm using ubuntu:22.04 but I dont know why in Docker the live react-app update doesn't work for me while running the container .....In stackoverflow i found CHOKIDAR_USEPOLLING but this also don't work any more.

Instead of that you can just add -e WATCHPACK_POLLING=true in your docker run command ...and that worked for me.

0

Note: use cmd terminal instead of git-bash

For mounting volume on windows following command not working for GIT-bash but works fine on cmd terminal

docker run -d -p 3000:3000 --name react-container -v %cd%/src:/app/src -e CHOKIDAR_USEPOLLING=true react-img
-1

CHOKIDAR_USEPOLLING=true is not try it should be like

CHOKIDAR_USEPOLLING: 'true'
2
  • CHOKIDAR_USEPOLLING=true is the right yml syntax in the docker compose file
    – Hossein
    Commented Nov 3, 2023 at 9:55
  • You are mistaked I have the true syntax because i have docker and i wrote it
    – Radomir
    Commented Nov 3, 2023 at 17:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.