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

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

[rmarcelo]

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

[marlonchalegre]

Any news in this issue?