React doesn't detect changes

[TarinPG]

I freshly installed nodejs and the create-react-app package. I've been having this problem for many days now and I was going through the official troubleshooting guide but nothing seems to be working.

no errors in console, no errors in build / compilation of things. I had a warning about missing tsutils so i installed
npm install typescript --save-dev

I am experiencing no errors at all and the changes still aren't picked up.

npm -v 6.14.8
node -v v14.15.1
Windows 10

I've been making changes to the file in the notepad ran as admin.

At this point I am clueless, please help.

[ChristianMurphy]

I had a warning about missing tsutils

Have you tried installing tsutils?

npm install --save-dev tsutils

[TarinPG]

result below
D:\Development\nodejs\node_modules\npm\myapp>npm install --save-dev tsutils npm notice save tsutils is being moved from dependencies to devDependencies npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\chokidar\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack-chokidar2\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\webpack-dev-server\node_modules\fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

[veD-tnayrB]

you fix it ? I have the same problem :(

[skipperpratik]

i am also facing same problem

[TarinPG]

I have reinstalled nodejs
I made sure I have typescript installed
I created an app then in the project dir I installed typescript and tsutils

Back to the default problem, Everything compiled correctly, there's no errors in the command prompt nor the web console yet it's still not refreshing the file when I save app.js

I'm clueless

[ChristianMurphy]

@TarinPG what script are you running for the server?
npm start? npm run build? something else?

[TarinPG]

npm start. sir :)

[ChristianMurphy]

have you tried the steps in https://create-react-app.dev/docs/troubleshooting#npm-start-doesnt-detect-changes ?

[PrajjwalDatir]

@TarinPG

I see you are using Windows ( D:\Development\nodejs\node_modules\npm\myapp> )

This issue is related to File watcher which is CHOKIDAR in this case so,

To solve this issue , Inside your package.json

find

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

and replace it with

"scripts": {
    "start": "CHOKIDAR_USEPOLLING=true react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

Refer this #10253 & #10197

[nathan-fiscaletti]

Update in case anyone comes here initially like I did. In react-scripts version 5.x.x, this environment variable was renamed. It's now WATCHPACK_POLLING.

"scripts": {
    "start": "WATCHPACK_POLLING=true react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
}

See #10253 (comment)

[pnitijarasrat]

Can you tell me why npm start does not detect changes

[franlaraa]

it works for me, thanks!

[muzzsteak]

I am having this problem as well, but my react app does not use webpack. Has anyone managed to fix this?