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

Gresliebear · 2022-01-04T13:39:00Z

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

The text was updated successfully, but these errors were encountered:

monophthongal · 2022-01-07T08:01:47Z

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

Gresliebear · 2022-01-07T18:48:06Z

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

zaras00tra · 2022-01-20T14:32:01Z

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

…book/create-react-app#11897, facebook/create-react-app#11879. Hot reload for frontend now working completes the containerized development environment for phonebook app created when using docker-compose.dev.yml

duplxey · 2022-01-28T19:24:54Z

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 · 2022-02-04T06:19:16Z

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 · 2022-02-04T11:55:09Z

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 · 2022-02-09T20:10:41Z

Any news in this issue?

axhatem · 2022-02-19T02:32:37Z

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 · 2022-02-19T22:07:49Z

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 · 2022-02-19T22:58:30Z

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 · 2022-02-20T08:17:44Z

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 · 2022-02-26T15:48:17Z

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

daverbj · 2022-03-08T13:46:30Z

Same problem with me with CRA5. However, I see something strange while running the containerised app through docker desktop dev environment preview. I believe it is doing the same thing running a dev env with container volume and the hot reload works. Trying to figure out how it works in dev env preview.

Makentosh · 2022-03-15T12:01:43Z

For a while, everything worked fine with 4.0.3 and even 5.0.0, but a few days ago after a docker crash, and remove all containers, hot reload also stopped working on all versions of CRA

chetans9 · 2022-03-16T18:19:11Z

Same issue here. Downgrading react-scripts@5.0.0 to react-scripts@4.0.3 worked for me. I am using docker in windows.

rmarcelo · 2022-03-16T19:51:45Z

Just sharing my workaround for CRA 5.0

// setup.js
const fs = require('fs');
const path = require('path');

if (process.env.NODE_ENV === 'development') {
  const webPackConfigFile = path.resolve('./node_modules/react-scripts/config/webpack.config.js');
  let webPackConfigFileText = fs.readFileSync(webPackConfigFile, 'utf8');

  if (!webPackConfigFileText.includes('watchOptions')) {
    if (webPackConfigFileText.includes('performance: false,')) {
      webPackConfigFileText = webPackConfigFileText.replace(
        'performance: false,',
        "performance: false,\n\t\twatchOptions: { aggregateTimeout: 200, poll: 1000, ignored: '**/node_modules', },"
      );
      fs.writeFileSync(webPackConfigFile, webPackConfigFileText, 'utf8');
    } else {
      throw new Error(`Failed to inject watchOptions`);
    }
  }
}

// package.json
"scripts": {
    "start": "node ./setup && react-scripts start",
...

hbh7 · 2022-03-17T00:26:51Z

@rmarcelo that works great with my app, thanks!
(Note, I removed the env check for my setup because it was redundant with our Docker configuration, so I can't speak to that part working)

Makentosh · 2022-03-17T07:43:45Z

Just sharing my workaround for CRA 5.0

// setup.js
const fs = require('fs');
const path = require('path');

if (process.env.NODE_ENV === 'development') {
  const webPackConfigFile = path.resolve('./node_modules/react-scripts/config/webpack.config.js');
  let webPackConfigFileText = fs.readFileSync(webPackConfigFile, 'utf8');

  if (!webPackConfigFileText.includes('watchOptions')) {
    if (webPackConfigFileText.includes('performance: false,')) {
      webPackConfigFileText = webPackConfigFileText.replace(
        'performance: false,',
        "performance: false,\n\t\twatchOptions: { aggregateTimeout: 200, poll: 1000, ignored: '**/node_modules', },"
      );
      fs.writeFileSync(webPackConfigFile, webPackConfigFileText, 'utf8');
    } else {
      throw new Error(`Failed to inject watchOptions`);
    }
  }
}

// package.json
"scripts": {
    "start": "node ./setup && react-scripts start",
...

create basic CRA 5.0 app, and add this file, hot reload still don`t work (
error in console

WebSocketClient.js:16 WebSocket connection to 'ws://localhost:3000/ws' failed:

Docker Desktop 4.6.0 (75818) is currently the newest version available.

docker file

services:
  node:
    tty: true
    stdin_open: true
    image: node:14.16.1-alpine
    working_dir: /var/www
    volumes:
      - .:/var/www
    ports:
      - 9999:3000
    command: sh -c "npm i && npm start"

package.json

{
  "name": "test-cra-5-docker",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "node ./setup && 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"
    ]
  }
}

Windows

Windows 10 Pro
version 21H2
collection 19044.1586
Windows Feature Experience Pack 120.2212.4170.0

rmarcelo · 2022-03-17T07:52:47Z

ws://localhost:3000/ws

@Makentosh
This is a different issue, but I've experience that error also, looking at your docker file, it seems that you should be using port 9999, you can do this by putting this on .env

WDS_SOCKET_PORT=9999

Makentosh · 2022-03-17T08:06:26Z

ws://localhost:3000/ws

@Makentosh This is a different issue, but I've experience that error also, looking at your docker file, it seems that you should be using port 9999, you can do this by putting this on .env

WDS_SOCKET_PORT=9999
I already did that, and try
CHOKIDAR_USEPOLLING=true
nothing helps =(

maybe a docker problem, or some cache?

rmarcelo · 2022-03-17T08:34:36Z

@Makentosh How do you access it in the browser? do you use reverse proxy? could you try WDS_SOCKET_PORT=0 ?

Makentosh · 2022-03-17T09:04:14Z

@rmarcelo
in browser get
http://localhost:9999/

WDS_SOCKET_PORT=0 also does not work

log in docker

audited 1272 packages in 6.062s


169 packages are looking for funding

  run `npm fund` for details


found 1 moderate severity vulnerability

  run `npm audit fix` to fix them, or `npm audit` for details

7m             .....] \ prepare:www: sill install printInstalled

> test-cra-5-docker@0.1.0 start /var/www

> node ./setup && react-scripts start


(node:43) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

(Use `node --trace-deprecation ...` to show where the warning was created)

(node:43) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

Starting the development server...


Compiled successfully!


You can now view test-cra-5-docker in the browser.


  Local:            http://localhost:3000

  On Your Network:  http://172.21.0.2:3000


Note that the development build is not optimized.

To create a production build, use npm run build.


assets by path static/js/*.js 1.48 MiB

  asset static/js/bundle.js 1.47 MiB [emitted] (name: main) 1 related asset

  asset static/js/node_modules_web-vitals_dist_web-vitals_js.chunk.js 6.94 KiB [emitted] 1 related asset

asset index.html 1.67 KiB [emitted]

asset asset-manifest.json 458 bytes [emitted]

runtime modules 31.3 KiB 15 modules

modules by path ./node_modules/ 1.35 MiB 99 modules

modules by path ./src/ 13.5 KiB

  modules by path ./src/*.css 8.82 KiB

    ./src/index.css 2.72 KiB [built] [code generated]

    ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/index.css 1.37 KiB [built] [code generated]

    ./src/App.css 2.72 KiB [built] [code generated]

    ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/App.css 2 KiB [built] [code generated]

  modules by path ./src/*.js 4.69 KiB

    ./src/index.js 1.74 KiB [built] [code generated]

    ./src/App.js 1.59 KiB [built] [code generated]

    ./src/reportWebVitals.js 1.36 KiB [built] [code generated]

webpack 5.70.0 compiled successfully in 20516 ms

timclifford · 2022-03-17T10:36:11Z

@Makentosh How do you access it in the browser? do you use reverse proxy? could you try WDS_SOCKET_PORT=0 ?

This worked for me - I'm using a reverse proxy

rmarcelo · 2022-03-17T11:16:33Z

@rmarcelo in browser get http://localhost:9999/

WDS_SOCKET_PORT=0 also does not work

log in docker

audited 1272 packages in 6.062s

169 packages are looking for funding

run npm fund for details

found 1 moderate severity vulnerability

run npm audit fix to fix them, or npm audit for details

7m .....] \ prepare:www: sill install printInstalled

test-cra-5-docker@0.1.0 start /var/www

node ./setup && react-scripts start

(node:43) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

(Use node --trace-deprecation ... to show where the warning was created)

(node:43) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

Starting the development server...

Compiled successfully!

You can now view test-cra-5-docker in the browser.

Local: http://localhost:3000

On Your Network: http://172.21.0.2:3000

Note that the development build is not optimized.

To create a production build, use npm run build.

assets by path static/js/*.js 1.48 MiB

asset static/js/bundle.js 1.47 MiB [emitted] (name: main) 1 related asset

asset static/js/node_modules_web-vitals_dist_web-vitals_js.chunk.js 6.94 KiB [emitted] 1 related asset

asset index.html 1.67 KiB [emitted]

asset asset-manifest.json 458 bytes [emitted]

runtime modules 31.3 KiB 15 modules

modules by path ./node_modules/ 1.35 MiB 99 modules

modules by path ./src/ 13.5 KiB

modules by path ./src/*.css 8.82 KiB
./src/index.css 2.72 KiB [built] [code generated]

./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/index.css 1.37 KiB [built] [code generated]

./src/App.css 2.72 KiB [built] [code generated]

./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/App.css 2 KiB [built] [code generated]
modules by path ./src/*.js 4.69 KiB
./src/index.js 1.74 KiB [built] [code generated]

./src/App.js 1.59 KiB [built] [code generated]

./src/reportWebVitals.js 1.36 KiB [built] [code generated]
webpack 5.70.0 compiled successfully in 20516 ms

@Makentosh Are you still getting this error in console, can you post what error are you getting now ?

WebSocketClient.js:16 WebSocket connection to 'ws://localhost:3000/ws' failed:

Makentosh · 2022-03-17T11:22:24Z

@rmarcelo There is no error, but hot reload does not work

rmarcelo · 2022-03-17T11:38:15Z

@rmarcelo There is no error, but hot reload does not work

The setup.js that I posted has this, maybe you're not getting development on your NODE_ENV, try to remove that and check if it works.

if (process.env.NODE_ENV === 'development') {

If that doesn't work try checking if you have this file on your node_modules:

./node_modules/react-scripts/config/webpack.config.js

If yes, check if you have this exact text on that webpack.config.js

performance: false,

Makentosh · 2022-03-18T07:45:15Z

@rmarcelo
Yes, I understand, your solution really solves the problem, I hope it will be added to the CRA update soon, thank you very much!

Makentosh · 2022-03-18T08:31:40Z

I tried to install version 4.0.3 separately,
but webpack.config is the samethat is 5.0.0,
all projects need to be updated to version 5, they force us to do so, and use this fix

It helped me

Just sharing my workaround for CRA 5.0

// setup.js
const fs = require('fs');
const path = require('path');

if (process.env.NODE_ENV === 'development') {
  const webPackConfigFile = path.resolve('./node_modules/react-scripts/config/webpack.config.js');
  let webPackConfigFileText = fs.readFileSync(webPackConfigFile, 'utf8');

  if (!webPackConfigFileText.includes('watchOptions')) {
    if (webPackConfigFileText.includes('performance: false,')) {
      webPackConfigFileText = webPackConfigFileText.replace(
        'performance: false,',
        "performance: false,\n\t\twatchOptions: { aggregateTimeout: 200, poll: 1000, ignored: '**/node_modules', },"
      );
      fs.writeFileSync(webPackConfigFile, webPackConfigFileText, 'utf8');
    } else {
      throw new Error(`Failed to inject watchOptions`);
    }
  }
}

// package.json
"scripts": {
    "start": "node ./setup && react-scripts start",
...

and set WDS_SOCKET_PORT = current port on docker

Hot reloading is broken in react-scripts, more information: facebook/create-react-app#11879

germanattanasio · 2022-03-22T14:30:39Z

Make sure you have the following option checked in Docker Desktop

hbh7 · 2022-03-22T17:53:12Z

I don't have that option, might be because I'm on Windows and you seem to be on macOS. This seems to be a WSL-specific issue I think.

Hot reloading is broken in react-scripts, more information: facebook/create-react-app#11879

sam-warren · 2022-04-18T02:38:07Z

Same issue here. @rmarcelo's workaround works for me, but I hope to see this fixed shortly.

SpenceUK · 2022-05-02T14:39:07Z

Make sure you have the following option checked in Docker Desktop

Solved it for me on Mac with CRA 5.0. Enabled gRPC FUSE for file sharing, restarted docker and now hot reload is working again! 😃

shawnwall · 2022-05-02T15:07:17Z

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.

ghost · 2022-05-31T21:49:00Z

rmarcello's solution worked for my situation with some additional configuration. I came from CRA 4.0.0.

The project is a mono repo with each package being built as it's own container inside a larger container. It uses a reverse proxy to access the server.

It's also worth noting I'm on Windows 11, though the reason the project is built the way it is, is to minimize OS related development issues.

I already had CHOKIDAR_USEPOLLING = true in the client package's .env. I'm not sure if it's still necessary, but didn't have any issues leaving it set to true. I found I had to add WDS_SOCKET_PORT = 0 as well, which makes sense since I've seen several comments mentioning this is necessary for reverse proxy environments, even thought it wasn't necessary back in 4.0.0. I also reversed and tweaked the first if statement since the project isn't explicitly setting NODE_ENV to development.

...
// if (process.env.NODE_ENV === 'development') {
if (process.env.NODE_ENV !== 'production') {
...

DarinDev1000 · 2022-07-19T22:49:12Z

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

endvvell · 2022-07-24T21:22:07Z

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
...

sohagmahin · 2022-09-06T18:37:52Z

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

Antsthebul · 2022-09-24T14:40:38Z

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

AObzh · 2022-10-27T15:48:38Z

added WDS_SOCKET_HOST=127.0.0.1 and seems it solve the problem.

andypan-twn · 2022-11-10T06:41:37Z

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

GustavoContreiras · 2022-12-23T16:33:58Z

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) .

Gresliebear · 2022-12-23T16:36:13Z

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

shoskensMagics · 2023-01-17T15:40:09Z

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).

acoory · 2023-02-06T18:32:28Z

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

hlgrondijs · 2023-03-08T08:12:46Z

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.

flaviobogila · 2024-06-04T13:28:21Z

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!

Gresliebear added issue: bug report needs triage labels Jan 4, 2022

hbh7 mentioned this issue Mar 17, 2022

React hotreload fix and package updates PollBuddy/PollBuddy#637

Merged

3 tasks

daniel-arnauer pushed a commit to openkfw/TruBudget that referenced this issue Mar 22, 2022

ui: fix hot reloading for docker and bare metal

9e8c671

Hot reloading is broken in react-scripts, more information: facebook/create-react-app#11879

daniel-arnauer mentioned this issue Mar 22, 2022

ui: fix hot reloading for docker and bare metal openkfw/TruBudget#1057

Merged

daniel-arnauer pushed a commit to openkfw/TruBudget that referenced this issue Mar 22, 2022

ui: fix hot reloading for docker and bare metal

2ce7b92

Hot reloading is broken in react-scripts, more information: facebook/create-react-app#11879

RavenDuffy mentioned this issue Mar 26, 2022

CHOKIDAR_USEPOLLING doesn't work on docker and Windows 11 #12002

Open

daniel-arnauer pushed a commit to openkfw/TruBudget that referenced this issue Mar 28, 2022

ui: fix hot reloading for docker and bare metal

d186418

Hot reloading is broken in react-scripts, more information: facebook/create-react-app#11879

daniel-arnauer pushed a commit to openkfw/TruBudget that referenced this issue Mar 28, 2022

ui: fix hot reloading for docker and bare metal

30fcbc2

Hot reloading is broken in react-scripts, more information: facebook/create-react-app#11879

daniel-arnauer pushed a commit to openkfw/TruBudget that referenced this issue Mar 30, 2022

ui: fix hot reloading for docker and bare metal

86f1a6c

Hot reloading is broken in react-scripts, more information: facebook/create-react-app#11879

jamesgeer mentioned this issue Aug 31, 2022

Docker hot-reloading not working jamesgeer/conf-twitter-bot#16

Closed

Gresliebear changed the title ~~CRA 5.0 fails to hot-reload in a docker container built On shoulders of _____~~ CRA 5.0 fails to hot-reload in a docker container built Jun 4, 2024

yuenaffiliates mentioned this issue Jul 12, 2024

Can't get HMR to work webdiscus/html-bundler-webpack-plugin#99

Closed

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

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

Comments

Gresliebear commented Jan 4, 2022 • edited Loading

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

monophthongal commented Jan 7, 2022

Gresliebear commented Jan 7, 2022

zaras00tra commented Jan 20, 2022 • edited Loading

duplxey commented Jan 28, 2022

sarang997 commented Feb 4, 2022 • edited Loading

duplxey commented Feb 4, 2022

marlonchalegre commented Feb 9, 2022

axhatem commented Feb 19, 2022 • edited Loading

Vadim2308 commented Feb 19, 2022

shuni95 commented Feb 19, 2022

Vadim2308 commented Feb 20, 2022

EJIqpEP commented Feb 26, 2022

daverbj commented Mar 8, 2022 • edited Loading

Makentosh commented Mar 15, 2022 • edited Loading

chetans9 commented Mar 16, 2022

rmarcelo commented Mar 16, 2022

hbh7 commented Mar 17, 2022 • edited Loading

Makentosh commented Mar 17, 2022 • edited Loading

rmarcelo commented Mar 17, 2022 • edited Loading

Makentosh commented Mar 17, 2022 • edited Loading

rmarcelo commented Mar 17, 2022

Makentosh commented Mar 17, 2022

timclifford commented Mar 17, 2022 • edited Loading

rmarcelo commented Mar 17, 2022

Makentosh commented Mar 17, 2022

rmarcelo commented Mar 17, 2022

Makentosh commented Mar 18, 2022

Makentosh commented Mar 18, 2022

germanattanasio commented Mar 22, 2022

hbh7 commented Mar 22, 2022

sam-warren commented Apr 18, 2022

SpenceUK commented May 2, 2022

shawnwall commented May 2, 2022

ghost commented May 31, 2022 • edited by ghost Loading

DarinDev1000 commented Jul 19, 2022

endvvell commented Jul 24, 2022

sohagmahin commented Sep 6, 2022

Antsthebul commented Sep 24, 2022 • edited Loading

AObzh commented Oct 27, 2022

andypan-twn commented Nov 10, 2022

GustavoContreiras commented Dec 23, 2022 • edited Loading

Gresliebear commented Dec 23, 2022

shoskensMagics commented Jan 17, 2023

acoory commented Feb 6, 2023

hlgrondijs commented Mar 8, 2023 • edited Loading

flaviobogila commented Jun 4, 2024

Gresliebear commented Jan 4, 2022 •

edited

Loading

zaras00tra commented Jan 20, 2022 •

edited

Loading

sarang997 commented Feb 4, 2022 •

edited

Loading

axhatem commented Feb 19, 2022 •

edited

Loading

daverbj commented Mar 8, 2022 •

edited

Loading

Makentosh commented Mar 15, 2022 •

edited

Loading

hbh7 commented Mar 17, 2022 •

edited

Loading

Makentosh commented Mar 17, 2022 •

edited

Loading

rmarcelo commented Mar 17, 2022 •

edited

Loading

Makentosh commented Mar 17, 2022 •

edited

Loading

timclifford commented Mar 17, 2022 •

edited

Loading

ghost commented May 31, 2022 •

edited by ghost

Loading

Antsthebul commented Sep 24, 2022 •

edited

Loading

GustavoContreiras commented Dec 23, 2022 •

edited

Loading

hlgrondijs commented Mar 8, 2023 •

edited

Loading