CRA 5.0 fails to hot-reload in a docker container built

Apolgozies for being super inexperience, there many layers and dont know which part of the problem I should debug like is it docker, is npm package manager, is it react-scripts@5.0.0 itself?

Describe the bug

CRA 5.0 fails to hot-reload in a docker container with using CHOKIDAR_USEPOLLING

Yes its mounted correctly. I checked many many times.

Environment

OS:Windows 10
VScode
WSL
Docker 4.2.0

Steps to reproduce

Lets say you

npx create-react-app my-app

you start the server it works normally, however your workflow at a company uses docker containers with react for development

you use the newer version of react-scripts@5.0.0

dockerfile created

WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
ENV PORT=3000
EXPOSE 3000
CMD ["npm", "run", "start"]

docker build -t react-test-2 ./

docker run -e CHOKIDAR_USEPOLLING=true -v D:\test-react-app\my-app:/app -it --name react-test-app2 -p 3000:3000 react-test-2

you triple check that bind mount is working. Try different directories, check docker, check Chokidar library,

So I went back to the version that worked with in react-scripts@4.0.3 it somehow works, try again different techniques

I see when I ran react-script@5.0.0

I get (node:31) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP MIDDLEWARE] DeprecationWarning: 'AfterStep Middleware' option is deprecated. Please use the 'setupMiddlewares' option.

Or the webpack log displays on start up don't know if its a issue or bug yet related
#11871

Or maybe it's

npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@2. I'll try to do my best with it!

Expected behavior

React to hot-reload as it did in react-scripts@4.0.3 inside a mounted volume docker container

Actual behavior

React-scripts@5.0.0 fails to hot-reload inside a mounted volume docker container

Reproducible demo

https://github.com/Gresliebear/Reproducible-demo

Solution

Downgrade react-scripts@5.0.0 to react-scripts@4.0.3

However your will expose to vulerabilites which 2 are critical

I found a workaround for a similar issue in #11897 (comment), does it resolve the problem for you?

@monophthongal

@monophthongal I will have to give this a shot!! When I get off work for the weekend

I found a workaround for a similar issue in #11897 (comment), does it resolve the problem for you?

Not working for me.
Same error : (node:27) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP MIDDLEWARE] DeprecationWarning: 'AfterStep Middleware' option is deprecated. Please use the 'setupMiddlewares'

I am on windows, That may cause the issue.
Latest Node docker image : Node.js v17.4.0

Workaround with previous version :

Need react-script : 4.0.3
I have also to fix : error:03000086:digital envelope routines::initialization error --> --openssl-legacy-provider

~~But need to press F5 for refresh~~
EDIT package.json was missing "eslintConfig": { "extends": [ "react-app", "react-app/jest" ]}

reverted to react-scripts 4.0.3 after running into these issues: reac…

I found a workaround for a similar issue in #11897 (comment), does it resolve the problem for you?

Not working for me. Same error : (node:27) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP MIDDLEWARE] DeprecationWarning: 'AfterStep Middleware' option is deprecated. Please use the 'setupMiddlewares'

I am on windows, That may cause the issue. Latest Node docker image : Node.js v17.4.0

Workaround with previous version :

Need react-script : 4.0.3

I have also to fix : error:03000086:digital envelope routines::initialization error --> --openssl-legacy-provider

~~But need to press F5 for refresh~~ EDIT package.json was missing "eslintConfig": { "extends": [ "react-app", "react-app/jest" ]}

Can confirm that downgrading react-scripts to 4.0.3 resolves the issue.

If anyone finds a more convenient solution, please tag me.

Check out this tutorial https://www.youtube.com/watch?v=xtllpDEOw4w&t=913s . At some point he creates docker-compose.yml file which actully updates the container file when you make changes to a file in the code editor.

Check out this tutorial https://www.youtube.com/watch?v=xtllpDEOw4w&t=913s . At some point he creates docker-compose.yml file which actully updates the container file when you make changes to a file in the code editor.

He's using an older version of react-scripts ("3.4.3").
https://github.com/veryacademy/docker-mastery-with-django/blob/main/Part-6%20Nginx%20React%20and%20Django%20Gunicorn/Final/react/blogapi/package.json#L13

The problem is with CRA 5.0.

Any news in this issue?

I did try only on the last version of the CRA and when i change a source file it updates on Linux container but not on the npm started instance and the web page doesnt change even after reloading it. I dont know if the samedi thing happens to you.

UPDATE; I did the test with the 4.0.3 and that one worked well

It doesn't work for me either...tried react scripts 4.0.3, different versions of NODE, hot reboot doesn't work...kick me if there is a solution)

A workaround for me was moving the folder project to the Ubuntu WSL folders, i mean /mnt/d/projects/new-project (win10) -> /home/shuni/new-project (linux) and it worked.

This is my Dockerfile

FROM node:12-alpine3.14
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
ENV PORT=3000
ENV CHOKIDAR_USEPOLLING=true
CMD ["npm", "start"]

and my docker-compose.yml

version: "3.4"

services:
  shunidex-ui:
    image: shunidex-ui
    volumes:
      - .:/app
      - node_modules:/app/node_modules
    environment:
      NODE_ENV: development
      CHOKIDAR_USEPOLLING: "true"
    command: npm start
    ports:
      - "0.0.0.0:3000:3000"

volumes:
  node_modules:

I remember i've read that was an issue related with the filesystem or something like that.

Thanks for the decision! I found an answer last night that says this problem is only on windows with WSL. On Linux everything is fine. I will try to

Still no solution except of downgrading to 4.0.3? People stop breaking things pls.

I just wanted to share my "fix" for this for those of you who may be using docker compose and are possibly running multiple frontend containers. Originally I had to custom set two different WDS_SOCKET_PATH for two different containers, along with exposing their dev 3000 ports to different host ports in case I needed to directly access:

example1:  
  ports:
    - "3001:3000"
  environment:
    - WDS_SOCKET_PATH=/example1/sockjs-node
    - CHOKIDAR_USEPOLLING=true
    
example2:
  ports:
    - "3002:3000"
  environment:
    - WDS_SOCKET_PATH=/example2/sockjs-node
    - CHOKIDAR_USEPOLLING=true

This broke recently as everyone knows. My workaround ended up being:

example1:  
  ports:
    - "3001:3000"
  environment:
      - WDS_SOCKET_PORT=3001
      
example2:
  ports:
    - "3002:3000"
  environment:
      - WDS_SOCKET_PORT=3002

...which then falls back to using the default path, but a different port... allowing hot reload to work. CHOKIDAR_USEPOLLING was removed. note I have a traefik proxy in front of these via docker also.

I also have this issue. Is this something that needs to be patched?

Running React container with either -e CHOKIDAR_USEPOLLING=true or -e WATCHPACK_POLLING=true solves the issue for me depending on the Webpack version I am using (I believe it was after version 5.72.1 that Webpack started using its own files watcher(Watchpack) as a replacement for Chokidar).

Could run it like so if you are unsure about the Webpack version:
docker run -e CHOKIDAR_USEPOLLING=true -e WATCHPACK_POLLING=true <your_container_image>

Could also, of course, add those variables into the dockerfile so they are provided during the building of the image:

...
ENV CHOKIDAR_USEPOLLING=true
ENV WATCHPACK_POLLING=true
...

faced same isssue. hot loading not working on react-script 5.0.0

@svitan0k fix worked for me! Thanks! Running Docker Desktop on Windows

added WDS_SOCKET_HOST=127.0.0.1 and seems it solve the problem.

Add UID and GID values and it solves the issue for me on Mac.

command:

$ docker run -u 1000:1000 -e ....

docker file:

USER 1000:1000

After almost 24 hours trying to setup this dockerized react app with webpack, typescript and hot reload I finally did it.

I'm on a Windows 10 and this is my setup:

Folder structure

.
├── root-folder-with-docker-compose
│   ├── reactadmin-app
│   │   ├── package.json
│   │   ├── Dockerfile
│   ├── docker-compose.yml 
│   ├── .env

package.json

{
  "name": "reactadmin-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "ra-data-json-server": "^4.6.2",
    "react": "^18.2.0",
    "react-admin": "^4.6.2",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.4.2",
    "web-vitals": "^2.1.0"
  },
  "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"
    ]
  }
}

Dockerfile

FROM node:18-alpine

WORKDIR /reactadmin-app
COPY package*.json .
RUN npm install
COPY . .
CMD npm start

docker-compose.yml

version: '3.8'
services:
  reactadmin-app:
    container_name: reactadmin-app
    build: ./reactadmin-app
    restart: unless-stopped
    env_file: ./.env
    ports:
      - $REACT_LOCAL_PORT:$REACT_DOCKER_PORT
    environment:
      - WATCHPACK_POLLING=true
      - WDS_SOCKET_HOST=127.0.0.1
      - WDS_SOCKET_PORT=$REACT_LOCAL_PORT
    stdin_open: true
    tty: true
    volumes:
      - $REACT_APP_PATH:/reactadmin-app
      - /reactadmin-app/node_modules

.env

REACT_APP_PATH="C:/dev/root-folder-with-docker-compose/reactadmin-app"
REACT_LOCAL_PORT=3000
REACT_DOCKER_PORT=3000

You can use VSCode Dev Containers extension to check if you are mounting/binding the volume/folders correctly (changes in a source file in your local machine should trigger changes in the same source file in the docker container) .

Wow thank you very much after a year we have solution, I am going to test it next and then close the issue

WATCHPACK_POLLING=true seems to be sufficient for me. Running Docker in WSL, having my source code in a Windows folder, running the frontend behind a reverse proxy (nginx).

Thank you very much you saved me a long evening of research I am saved

@GustavoContreiras

Unfortunately the solution by @GustavoContreiras does not seem to work on my Mac. Hot reload works fine on the host system, but when containerized, no hot-reload is happening. Inspecting the websocket used for the reload functionality reveals there are no "invalid" packets being received when a file is changed.

The volume is mounted properly (inspecting the file in the container reveals it DID update) and I also selected gRPC FUSE as mentioned above.

Running React container with either -e CHOKIDAR_USEPOLLING=true or -e WATCHPACK_POLLING=true solves the issue for me depending on the Webpack version I am using (I believe it was after version 5.72.1 that Webpack started using its own files watcher(Watchpack) as a replacement for Chokidar).

Could run it like so if you are unsure about the Webpack version: docker run -e CHOKIDAR_USEPOLLING=true -e WATCHPACK_POLLING=true <your_container_image>

Could also, of course, add those variables into the dockerfile so they are provided during the building of the image:
...
ENV CHOKIDAR_USEPOLLING
ENV WATCHPACK_POLLING=true
...

I've already try to use CHOKIDAR_USEPOLLING and not worked, but WATCHPACK_POLLING worked perfectly, thanks!

Navigation Menu

Repository navigation

CRA 5.0 fails to hot-reload in a docker container built #11879

Describe the bug

Environment

Steps to reproduce

npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@2. I'll try to do my best with it!

Expected behavior

Actual behavior

Reproducible demo

Solution

36 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

CRA 5.0 fails to hot-reload in a docker container built #11879

Description

Describe the bug

Environment

Steps to reproduce

npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@2. I'll try to do my best with it!

Expected behavior

Actual behavior

Reproducible demo

Solution

Activity

monophthongal commented on Jan 7, 2022

lesliewubbel commented on Jan 7, 2022

zaras00tra commented on Jan 20, 2022

duplxey commented on Jan 28, 2022

sarang997 commented on Feb 4, 2022

duplxey commented on Feb 4, 2022

marlonchalegre commented on Feb 9, 2022

axhatem commented on Feb 19, 2022

Vadim2308 commented on Feb 19, 2022

shuni95 commented on Feb 19, 2022

Vadim2308 commented on Feb 20, 2022

EJIqpEP commented on Feb 26, 2022

36 remaining items

shawnwall commented on May 2, 2022

DarinDev1000 commented on Jul 19, 2022

endvvell commented on Jul 24, 2022

sohagmahin commented on Sep 6, 2022

Antsthebul commented on Sep 24, 2022

AObzh commented on Oct 27, 2022

andypan-twn commented on Nov 10, 2022

GustavoContreiras commented on Dec 23, 2022

lesliewubbel commented on Dec 23, 2022

shoskensMagics commented on Jan 17, 2023

acoory commented on Feb 6, 2023

hlgrondijs commented on Mar 8, 2023

flaviobogila commented on Jun 4, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions