search

facebook / create-react-app

Set up a modern web app by running one command.
https://create-react-app.dev
MIT License
102.3k stars 26.71k forks source link

Hot reload is not working for react 16.14.0 #13402

Open zeeshan-rev opened 9 months ago

zeeshan-rev commented 9 months ago

In my project hot reload is not working I have already tried fixes from the internet suggesting the use of CHOKIDAR_USEPOLLING=true or FAST_REFRESH=true

I am attaching the package.json below... look for startWin in scripts.

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@atlaskit/button": "^15.1.4",
    "@azure/msal-browser": "^2.14.2",
    "@azure/msal-react": "^1.0.0",
    "@ckeditor/ckeditor5-react": "^5.0.2",
    "@cyntler/react-doc-viewer": "1.13.0",
    "@emotion/core": "^10.0.35",
    "@emotion/react": "^11.8.1",
    "@emotion/styled": "^11.8.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.32",
    "@fortawesome/free-solid-svg-icons": "^5.15.1",
    "@fortawesome/react-fontawesome": "^0.1.13",
    "@hookform/error-message": "^0.0.5",
    "@hookform/resolvers": "^1.2.0",
    "@iconify/icons-bx": "^1.1.0",
    "@iconify/react": "^1.1.4",
    "@loadable/component": "^5.15.2",
    "@mapbox/mapbox-gl-draw": "^1.4.2",
    "@mapbox/mapbox-gl-geocoder": "^5.0.1",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@material-ui/styles": "^4.10.0",
    "@mui/material": "^5.4.4",
    "@react-google-maps/api": "^2.17.1",
    "@react-oauth/google": "^0.2.6",
    "@stripe/stripe-js": "^1.13.1",
    "@tanstack/react-query": "^4.28.0",
    "@tanstack/react-query-devtools": "^4.29.0",
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "9.3.2",
    "@testing-library/user-event": "7.1.2",
    "@turf/area": "^6.5.0",
    "@types/jest": "24.0.23",
    "@types/jquery": "^3.5.4",
    "@types/js-cookie": "^2.2.6",
    "@types/mapbox__mapbox-gl-draw": "^1.4.0",
    "@types/node": "12.12.14",
    "@types/react": "16.9.15",
    "@types/react-bootstrap-table-next": "^4.0.10",
    "@types/react-bootstrap-table2-filter": "^1.3.0",
    "@types/react-datepicker": "^2.0.0",
    "@types/react-dom": "16.9.4",
    "@types/react-google-recaptcha": "^2.1.0",
    "@types/react-helmet": "^6.1.0",
    "@types/react-router-bootstrap": "^0.24.5",
    "@types/react-router-dom": "5.1.3",
    "@types/react-scroll": "^1.8.3",
    "@types/react-select": "^3.0.26",
    "@types/react-select-country-list": "^2.2.0",
    "@types/react-simple-maps": "^1.0.8",
    "@types/react-table": "^7.7.6",
    "@types/react-time-picker": "^4.0.2",
    "@types/reactour": "^1.18.1",
    "@vvo/tzdb": "^6.51.0",
    "amazon-quicksight-embedding-sdk": "^1.18.0",
    "animate.css": "^4.1.1",
    "array-move": "^3.0.1",
    "axios": "^0.21.0",
    "bootstrap": "^4.5.3",
    "broadcast-channel": "^3.4.1",
    "broadcastchannel-polyfill": "^1.0.1",
    "chance": "^1.1.8",
    "chonky": "^2.1.0",
    "chonky-icon-fontawesome": "^2.1.0",
    "ckeditor5": "35.1.0",
    "ckeditor5-custom-build": "./ckeditor5",
    "classnames": "^2.3.1",
    "color-thief-react": "^2.1.0",
    "colorthief": "^2.3.2",
    "country-tz-currency": "^1.0.1",
    "currency-list": "^1.0.8",
    "formik": "^2.2.9",
    "fuzzyset": "^1.0.6",
    "gapi-script": "^1.2.0",
    "geojson": "^0.5.0",
    "hellosign-embedded": "^2.10.0",
    "hellosign-sdk": "^2.0.0",
    "html5-file-selector": "^2.1.0",
    "i": "^0.3.7",
    "i18next": "^21.3.2",
    "i18next-browser-languagedetector": "^6.1.2",
    "i18next-http-backend": "^1.3.1",
    "ics": "^2.35.0",
    "jquery": "^3.5.1",
    "js-cookie": "latest",
    "jwt-decode": "^3.1.1",
    "kv-custom-chonky": "2.2.11",
    "lodash": "^4.17.21",
    "mapbox-gl": "^2.15.0",
    "moment": "^2.29.1",
    "moment-timezone": "^0.5.32",
    "node-sass": "^4.14.1",
    "normalize.css": "8.0.1",
    "npm": "^8.19.2",
    "prop-types": "^15.7.2",
    "rc-input-number": "^7.3.3",
    "rc-pagination": "^3.1.9",
    "re-resizable": "^6.9.0",
    "react": "^16.14.0",
    "react-app-polyfill": "1.0.5",
    "react-avatar-editor": "^12.0.0",
    "react-bootstrap": "^1.4.0",
    "react-bootstrap-table-next": "^4.0.3",
    "react-bootstrap-table2-filter": "^1.3.3",
    "react-bootstrap-table2-overlay": "^2.0.0",
    "react-bootstrap-table2-paginator": "^2.1.2",
    "react-bootstrap-table2-toolkit": "^2.1.3",
    "react-bootstrap-toggle": "^2.3.2",
    "react-calendly": "^2.2.2",
    "react-code-input": "^3.10.0",
    "react-csv": "^2.2.2",
    "react-currency-input-field": "^3.3.1",
    "react-data-table-component": "^6.11.5",
    "react-datepicker": "^4.5.0",
    "react-device-detect": "^1.17.0",
    "react-dom": "npm:@hot-loader/react-dom",
    "react-dropdown-select": "^4.7.4",
    "react-dropzone": "^11.3.2",
    "react-dropzone-uploader-fork": "revnueinc/react-dropzone-uploader#master",
    "react-dual-listbox": "^2.0.0",
    "react-easy-edit": "^1.15.0",
    "react-file-viewer": "^1.2.1",
    "react-full-screen": "^1.1.1",
    "react-google-login": "^5.2.2",
    "react-google-maps": "^9.4.5",
    "react-google-recaptcha": "^2.1.0",
    "react-helmet": "^6.1.0",
    "react-hook-form": "^6.9.6",
    "react-hot-loader": "4.12.18",
    "react-i18next": "^11.12.0",
    "react-icalendar-link": "^3.0.2",
    "react-idle-timer": "^4.6.3-rc.4",
    "react-map-gl": "^7.1.5",
    "react-microsoft-login": "^1.12.1",
    "react-moment": "^1.0.0",
    "react-number-format": "^4.7.3",
    "react-pin-input": "^1.0.1",
    "react-qr-code": "^1.1.1",
    "react-redux": "7.2.4",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "5.1.2",
    "react-router-navigation-prompt": "^1.8.13",
    "react-scripts": "3.4.3",
    "react-scroll": "^1.8.3",
    "react-select": "^3.1.1",
    "react-select-country-list": "^2.2.3",
    "react-simple-captcha": "^8.2.6",
    "react-simple-maps": "^3.0.0",
    "react-sortable-hoc": "^2.0.0",
    "react-sortablejs": "^6.0.0",
    "react-switch": "^7.0.0",
    "react-table": "^7.7.0",
    "react-time-picker": "^4.5.0",
    "react-toastify": "^7.0.3",
    "react-use-uuid": "^1.1.0",
    "react-uuid": "^1.0.2",
    "react-verification-code-input": "^1.2.9",
    "react-virtualized": "^9.22.3",
    "reactour": "^1.18.4",
    "recharts": "^2.0.8",
    "redux": "4.1.0",
    "sortablejs": "^1.14.0",
    "stripe": "^8.138.0",
    "styled-components": "5.2.1",
    "typescript": "^4.8.4",
    "use-places-autocomplete": "^4.0.0",
    "userpilot": "^1.2.8",
    "validate.js": "^0.13.1",
    "worker-loader": "^3.0.8",
    "xlsx": "^0.18.5",
    "yup": "^0.32.8",
    "zxcvbn": "^4.4.2"
  },
  "resolutions": {
    "react-error-overlay": "6.0.9",
    "underscore": "1.12.1",
    "nth-check": "2.0.1",
    "ansi-regex": "4.1.1",
    "async": "2.6.4",
    "ws": "5.2.3",
    "ssri": "7.1.1",
    "css-what": "5.0.1",
    "json-schema": "0.4.0",
    "is-svg": "4.3.0",
    "cross-fetch": "3.1.5",
    "node-fetch": "2.6.7",
    "trim-newlines": "3.0.1",
    "tar": "4.4.18",
    "object-path": "0.11.8",
    "postcss": "7.0.36",
    "ansi-html": "0.0.8",
    "node-notifier": "8.0.1",
    "immer": "9.0.6",
    "react-dev-utils": "11.0.4",
    "browserslist": "4.16.5",
    "node-forge": "1.3.0",
    "glob-parent": "5.1.2"
  },
  "scripts": {
    "startAdmin": "REACT_APP_STAGE=local REACT_APP_ADMIN=1 cross-env AUTOPREFIXER_GRID=autoplace react-scripts start",
    "startAdminWin": "set REACT_APP_STAGE=local && set REACT_APP_ADMIN=1 && set AUTOPREFIXER_GRID=autoplace && react-scripts start",
    "start": "cross-env REACT_APP_STAGE=local AUTOPREFIXER_GRID=autoplace react-scripts --max_old_space_size=4096 start",
    "startWin": "set REACT_APP_STAGE=local && set AUTOPREFIXER_GRID=autoplace && set CHOKIDAR_USEPOLLING=true && set FAST_REFRESH=true && react-scripts start",
    "startDev": "REACT_APP_STAGE=dev cross-env AUTOPREFIXER_GRID=autoplace react-scripts start",
    "startProd": "REACT_APP_STAGE=prod cross-env AUTOPREFIXER_GRID=autoplace react-scripts start",
    "dev": "REACT_APP_STAGE=dev cross-env AUTOPREFIXER_GRID=autoplace react-scripts start",
    "build": "REACT_APP_STAGE=prod cross-env AUTOPREFIXER_GRID=autoplace react-scripts --max_old_space_size=4096 build",
    "buildWin": "set  REACT_APP_STAGE=prod && set AUTOPREFIXER_GRID=autoplace && react-scripts build",
    "buildAdmin": "REACT_APP_STAGE=prod REACT_APP_ADMIN=1 cross-env AUTOPREFIXER_GRID=autoplace react-scripts build",
    "buildDev": "REACT_APP_STAGE=dev cross-env AUTOPREFIXER_GRID=autoplace react-scripts build",
    "buildDevAdmin": "REACT_APP_STAGE=dev REACT_APP_ADMIN=1 cross-env AUTOPREFIXER_GRID=autoplace react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "REACT_APP_STAGE=prod cross-env AUTOPREFIXER_GRID=autoplace react-scripts build"
  },
  "eslintConfig": {
    "extends": "react-app",
    "ignorePatterns": [
      "src/*",
      "!src/test.js"
    ]
  },
  "browserslist": {
    "production": [
      "cover 99.5%",
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "cover 99.5%",
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "last 1 ie version"
    ]
  },
  "devDependencies": {
    "@types/enzyme": "^3.10.8",
    "@types/enzyme-adapter-react-16": "^1.0.6",
    "@types/fuzzyset": "^1.0.3",
    "@types/google-map-react": "^2.1.7",
    "@types/loadable__component": "^5.13.4",
    "@types/react-csv": "^1.1.3",
    "@types/sortablejs": "^1.10.7",
    "autoprefixer": "^10.3.7",
    "cross-env": "^7.0.3",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.5",
    "mutationobserver-shim": "^0.3.7",
    "prettier": "^2.4.1",
    "yarn-audit-fix": "^9.3.1"
  }
}

I have not been able to find any solution on the web. I make any changes and in order for it to reflect I have to reload the browser.

IdoBouskila commented 9 months ago

If you're using WSL2, try adding a .env file to your project's root directory and including the following line in it: WATCHPACK_POLLING=true or you can add it directly to your package.json start script.