Containerization Frontend project cannot auto-refresh after code changes - reactjs

Question

I have a frontend project that was containerized by docker and docker-compose.yml, a few months ago. It was good and can automatically refresh the page localhost:8080 after I made the code changes, Below shows the main code,
docker-compose.yml
client:
build:
context: ./client
dockerfile: ./docker/local/Dockerfile
restart: on-failure
volumes:
- ./client:/app
- /app/node_modules
networks:
- myapp
nginx:
restart: always
depends_on:
- api
volumes:
- static_volume:/app/staticfiles
- media_volume:/app/mediafiles
build:
context: ./docker/local/nginx
dockerfile: Dockerfile
ports:
- "8080:80"
networks:
- myapp
nginx configurations
upstream client {
server client:3000;
}
server {
location /ws {
proxy_pass http://client;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
}
location / {
proxy_pass http://client;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $server_name;
}
}
.env file
WDS_SOCKET_PORT=0
FAST_REFRESH=false
CHOKIDAR_USEPOLLING=true
app.jsx
import React from "react";
const App = () => {
return (
<div className="App">
<h1>Hello World</h1>
</div>
);
};
export default App;
package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#reduxjs/toolkit": "^1.8.2",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^14.2.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-redux": "^8.0.2",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
}
After I make code changes, I can get into the container, and the code does change inside and volume is working. I have no idea why the front end package will not refresh as it was few months ago. I re-installed docker and switched a new pc, but no luck still.
Can anyone provide me some insights?

Answer 1

This is the issue of webpack, if we add WATCHPACK_POLLING=true to the .env file, the auto refresh will be working properly.