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

[Gresliebear]

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

[monophthongal]

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

[Gresliebear]

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

[zaras00tra]

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" ]}

[duplxey]

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.

[sarang997]

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.

[duplxey]

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.

[marlonchalegre]

Any news in this issue?

[axhatem]

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

[Vadim2308]

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)

[shuni95]

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.

[Vadim2308]

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

[EJIqpEP]

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