create-react-app
create-react-app copied to clipboard
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 [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
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 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" ]}
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.
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.
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
Same issue here. Downgrading [email protected] to [email protected] worked for me. I am using docker in windows.
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 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)
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
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
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 How do you access it in the browser? do you use reverse proxy? could you try WDS_SOCKET_PORT=0 ?
@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 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 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 detailsfound 1 moderate severity vulnerability
run
npm audit fix
to fix them, ornpm audit
for details7m .....] \ 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 There is no error, but hot reload does not work
@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,
NODE_ENV work also in ./node_modules/react-scripts/config/webpack.config.js performance: false
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 did your webpack.configs.php became like this at the bottom?
@rmarcelo No
@Makentosh can you show us what your webpack.config.js looks like at the performance: false, ? wrong filename reference on my previous comment
@rmarcelo
@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
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 ?
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
but custom env variable is see
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 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 Yes, I understand, your solution really solves the problem, I hope it will be added to the CRA update soon, thank you very much!
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
Make sure you have the following option checked in Docker Desktop
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.
Same issue here. @rmarcelo's workaround works for me, but I hope to see this fixed shortly.
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! 😃
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.
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') {
...
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
...