create-react-app icon indicating copy to clipboard operation
create-react-app copied to clipboard

CRA 5.0 fails to hot-reload in a docker container built On shoulders of _____

Open Gresliebear opened this issue 3 years ago • 49 comments

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 [email protected] 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 [email protected]

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 [email protected] it somehow works, try again different techniques

I see when I ran [email protected]

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 https://github.com/facebook/create-react-app/issues/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 [email protected] inside a mounted volume docker container

Actual behavior

[email protected] fails to hot-reload inside a mounted volume docker container

Reproducible demo

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

Solution

Downgrade [email protected] to [email protected]

However your will expose to vulerabilites which 2 are critical

image

Gresliebear avatar Jan 04 '22 13:01 Gresliebear

I found a workaround for a similar issue in https://github.com/facebook/create-react-app/issues/11897#issuecomment-1007206461, does it resolve the problem for you?

monophthongal avatar Jan 07 '22 08:01 monophthongal

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

Gresliebear avatar Jan 07 '22 18:01 Gresliebear

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

zaras00tra avatar Jan 20 '22 14:01 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" ]}

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

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

duplxey avatar Jan 28 '22 19:01 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.

sarang997 avatar Feb 04 '22 06:02 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.

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.

duplxey avatar Feb 04 '22 11:02 duplxey

Any news in this issue?

marlonchalegre avatar Feb 09 '22 20:02 marlonchalegre

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

axhatem avatar Feb 19 '22 02:02 axhatem

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)

Vadim2308 avatar Feb 19 '22 22:02 Vadim2308

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.

shuni95 avatar Feb 19 '22 22:02 shuni95

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

Vadim2308 avatar Feb 20 '22 08:02 Vadim2308

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

EJIqpEP avatar Feb 26 '22 15:02 EJIqpEP

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.

daverbj avatar Mar 08 '22 13:03 daverbj

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

Makentosh avatar Mar 15 '22 12:03 Makentosh

Same issue here. Downgrading [email protected] to [email protected] worked for me. I am using docker in windows.

chetans9 avatar Mar 16 '22 18:03 chetans9

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

rmarcelo avatar Mar 16 '22 19:03 rmarcelo

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

hbh7 avatar Mar 17 '22 00:03 hbh7

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

Makentosh avatar Mar 17 '22 07:03 Makentosh

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

rmarcelo avatar Mar 17 '22 07:03 rmarcelo

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?

Makentosh avatar Mar 17 '22 08:03 Makentosh

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

rmarcelo avatar Mar 17 '22 08:03 rmarcelo

@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

> [email protected] 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 avatar Mar 17 '22 09:03 Makentosh

@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

timclifford avatar Mar 17 '22 10:03 timclifford

@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

[email protected] 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: 

rmarcelo avatar Mar 17 '22 11:03 rmarcelo

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

Makentosh avatar Mar 17 '22 11:03 Makentosh

@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,

rmarcelo avatar Mar 17 '22 11:03 rmarcelo

NODE_ENV work also in ./node_modules/react-scripts/config/webpack.config.js performance: false

Makentosh avatar Mar 17 '22 11:03 Makentosh

it`s bad magic :( i can't work properly with all my projects on CRA through docker without hot reload downgrade to 4.0.3 also not help not understand where my fault (

Makentosh avatar Mar 17 '22 12:03 Makentosh

@Makentosh did your webpack.configs.php became like this at the bottom?

image

rmarcelo avatar Mar 17 '22 13:03 rmarcelo

@rmarcelo No

Makentosh avatar Mar 17 '22 13:03 Makentosh

@Makentosh can you show us what your webpack.config.js looks like at the performance: false, ? wrong filename reference on my previous comment

rmarcelo avatar Mar 17 '22 14:03 rmarcelo

@rmarcelo webpackconfig-cra

Makentosh avatar Mar 17 '22 15:03 Makentosh

@Makentosh hmm, that's weird, I don't see any reason why it should not work anymore on your end, the setup.js should trigger on npm start or yarn start which would replace performance:false, with the performance:false, + watchOptions config.

rmarcelo avatar Mar 17 '22 16:03 rmarcelo

@rmarcelo My fault I tried to overwrite NODE_ENV , although it is the default in CRA and i see whe docker dont see him from file setup.js, but after build react-scripts start this variable see in console from browser
what do you think ? node-env

also I tried to run the setup.js script separately without docker, and so it overwrote webpack.config and when after that I built up the container hot reload worked

Makentosh avatar Mar 17 '22 20:03 Makentosh

but custom env variable is see env-2

Makentosh avatar Mar 17 '22 21:03 Makentosh

I know i can pass a custom variable (like REACT_APP_VERSION=development), and check her in setup.js but doing it in every project is weird

Makentosh avatar Mar 17 '22 21:03 Makentosh

@Makentosh you can remove the if (process.env.NODE_ENV === 'development') {} , I just put it there since I'm also using the setup.js for my npm build

rmarcelo avatar Mar 18 '22 07:03 rmarcelo

@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 avatar Mar 18 '22 07:03 Makentosh

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

Makentosh avatar Mar 18 '22 08:03 Makentosh

Make sure you have the following option checked in Docker Desktop docker

germanattanasio avatar Mar 22 '22 14:03 germanattanasio

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

hbh7 avatar Mar 22 '22 17:03 hbh7

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

sam-warren avatar Apr 18 '22 02:04 sam-warren

Make sure you have the following option checked in Docker Desktop docker

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! 😃

SpenceUK avatar May 02 '22 14:05 SpenceUK

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.

shawnwall avatar May 02 '22 15:05 shawnwall

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

ghost avatar May 31 '22 21:05 ghost

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

DarinDev1000 avatar Jul 19 '22 22:07 DarinDev1000

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

endvvell avatar Jul 24 '22 21:07 endvvell