CODEWITHSUNDEEP
reactjsreload
Rasha_N
Rasha_N

Reputation: 21

My React 18 app does not reload automatically I try to click on the create new project button does not work unless I refresh the page manually

My React 18 app does not reload automatically I try to click on the create new project button does not work unless I refresh the page manually. This button will change the URL to be localhost3000/create also the style of the page is not updated based on this click. I tried reinstalling the node-modules and changing App.js to App.jsx and index.js to index.jsx.Note I can see any code reflecting changes on the web . the problem is with changes interacting with the page on the localhost.

enter image description here

This is my package.json

{
  "name": "the-dojo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^13.5.0",
    "firebase": "^8.5.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-router-dom": "^5.1.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"
  },
  "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"
    ]
  }
}

I also add the .env file to the main directory

FAST_REFRESH = false
SKIP_PREFLIGHT_CHECK=true
CHOKIDAR_USEPOLLING=true

Upvotes: 1

Views: 5626

Answers (2)

Achven
Achven

Reputation: 41

In react-sripts 5.0 CHOKIDAR_USEPOLLING=true not working. You can back to React 18, but try use WATCHPACK_POLLING=true instead CHOKIDAR_USEPOLLING=true

Upvotes: 4

Rasha_N
Rasha_N

Reputation: 21

I solved the problem by 1- deleted the node_modules & package-lock.json. 2- update the dependencies back to React 17.0.2

  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "firebase": "^8.10.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"

3- npm install 4- add an .env file with this line

SKIP_PREFLIGHT_CHECK=true

And it worked. @Channaveer Thank you

Upvotes: 0

Related Questions