React-Scripts commence à ne pas accepter les modifications js

Question

J'ai une application React démarrée à l'aide de create-react-app. L'application s'exécute dans un conteneur Docker et a été déployée dans un sous-domaine. Disons que le nom de domaine est http://mycompany.com , alors mon application React se trouve à http://mycompany.com/users/userid/apps/reactapp .

Il existe un serveur proxy inverse qui réécrit l'URL, en changeant l'URL de base en URL de sous-domaine. Voici à quoi ressemble mon package.json -

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.12.4",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "@types/classnames": "^2.3.1",
    "@types/jest": "^27.0.3",
    "@types/node": "^16.11.47",
    "@types/react": "^17.0.38",
    "@types/react-dom": "^17.0.11",
    "@types/react-icons": "^3.0.0",
    "@types/react-router-dom": "^5.3.2",
    "@types/sass": "^1.43.1",
    "bootstrap": "^5.1.3",
    "classnames": "^2.3.1",
    "font-awesome": "^4.7.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.3.1",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.0",
    "register-service-worker": "^1.7.2",
    "typescript": "^4.5.4",
    "web-vitals": "^2.1.2"
  },
  "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"
    ]
  },
  "devDependencies": {
    "css-flatten": "^1.0.1",
    "react-hot-loader": "^4.13.1",
    "react-select": "^5.4.0",
    "sass": "^1.45.2"
  }
}

Le problème auquel je suis confronté est que les modifications apportées au fichier JS ne sont pas reflétées même après le redémarrage du serveur de développement à l'aide du démarrage des scripts de réaction. Cela ne se reflète que lorsque je redémarre le conteneur Docker. Dans le navigateur, j'ai vérifié et le fichier bundle.js ne contient pas les dernières modifications. J'ai essayé ces choses -

1. Supprimez node_modules/.cache, node_modeules
2. Utilisez CHOKIDAR_USEPOLLING=true au démarrage des scripts de réaction

Je peux voir dans les journaux du serveur de développement que des modifications de fichiers sont détectées, mais ces modifications ne sont pas transmises au navigateur. Même si je supprime un fichier (afin de pouvoir voir le journal des erreurs dans le journal du serveur de développement), rien ne change dans l'application même si le navigateur s'actualise.

Answer 1

Vous devrez peut-être ajouter les éléments suivants aux en-têtes de réponse côté serveur

"headers": { 
    "/**": { 
        "Cache-Control": "no-store, no-cache" 
    } 
}

Si le problème persiste, vous pouvez essayer de vider le cache du navigateur

Questions connexes :

1. Effacement du cache à l'aide de CRA React
2. ReactJS : Comment empêcher les navigateurs de mettre en cache les fichiers statiques ?