react-scripts start is serving old data

[Lagicrus]

Describe the bug

When using react scripts start to serve Dev data, the served JSX is old/cached when it breaks.
For example, when I accidentally added ; by accident to the end of some code, it broke, and it gave me the popup to say so. But when I then fixed it, that broken code is still being shown to me in the error, even after I both reload the page and even do a forced reload. I have saved the file multiple times and even opened the file itself in a separate program to make sure that it is indeed "fixed", and it is. But webpack seems to think that nope, it is broken still.

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

Old code, serving old code, build not updating

Environment

System:
OS: Windows 10 10.0.20279
CPU: (12) x64 AMD Ryzen 5 1600 Six-Core Processor
Binaries:
Node: 12.14.1 - E:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 6.14.10 - E:\OneDrive\GitHub\talespire\site\node_modules.bin\npm.CMD
Browsers:
Chrome: 87.0.4280.88
Edge: Spartan (44.20279.1.0)
Internet Explorer: 11.0.20279.1
npmPackages:
react: ^16.14.0 => 16.14.0
react-dom: ^16.14.0 => 16.14.0
react-scripts: ^4.0.1 => 4.0.1
npmGlobalPackages:
create-react-app: Not Found

Steps to reproduce

1. Create a CRA App
2. start the server to serve it to the client to work on
3. add a error
4. fix the error
5. see no change

Expected behavior

The code to change in the browser & console when I changed the file itself

Actual behavior

It didn't change.
Both console and the website give me this error
, but the code it references is this https://starb.in/BjDNGR.js
This is even the case after, reloading the page, clearing cache, restarting the server, uninstalling it (4.0.1) and reinstalling ^3.4 and back again. Even removing that whole function, saving, and adding it back in doesn't fix.
Breaking it will show the new error, but when that is fixed, it will show the old one and old code again.
I got it to work once an hour ago and no idea how I did that.

[mcchong]

Oh my goodness I am having the same issue and I have no idea how to fix it. It is EXTREMELY frustrating (I initially typed this comment out completely in all caps). It appears to happen intermittently and I cannot find a fix or workaround.

[mcchong]

It seems to appear when running the dev sever (via npm start) mysteriously in tall grass or when I am making changes that really confuse the parser quickly (e.g. copy-pasting a block of code and then modifying it). It doesn't go away unless some webpack/babel god smiles upon you (I have had it fix itself while googling the issue).

I have tried:

• Removing the file with the compile issue, reverting via git. (the compile issue remains and refers to a line that doesn't exist).
• Removing the node_modules dir, re-running npm install
• npm build usually also fails
• Checking the global node_modules dir to see if there was some cache there (don't really have anything installed there except npm)
• https://create-react-app.dev/docs/troubleshooting#npm-start-doesnt-detect-changes
• Burnt offering of a miniature goat.

I'm working through the react-scripts build process now to figure out a workaround but any guidance anyone might have would be greatly appreciated.

[mcchong]

Renaming the parent directory might be a temporary workaround, seems to have worked for me just now.

[aaronisrael]

Try to delete .eslintcache and restart. This is most likely to do with #10161

[petesmc]

Same issue, need to constantly delete the .eslintcache file otherwise:

1. Incorrect errors or mising errors displayed
2. Cached files served

[gragland]

I'm also seeing this issue on 4.0.1. eslint warnings do not go away after being resolved until I've both deleted .eslintcache and restarted react-scripts start.

[Poyoman39]

Same pb here with "react-scripts": "4.0.3"
I confirm it looks like a problem with eslintcache

Note that since this version you will need to remove it this way
rm node_modules/.cache/.eslintcache

[fabpico]

react-scripts 5.0.0. Had that problem with a dependency (file in node_modules). I updated the dependency and the file in node_modules was definitely updated. Removing node_modules/.cache/.eslintcache and restarting the app did not work for me. I removed the entire node_modules folder and installed all packages again, then it worked.

[tomsjansons]

I'm on react-scripts 5.0.0 and running rm -rf node_modules/.cache/ and then yarn start helped

[aetherealtech]

Same issue here. To force the up to date dependencies to be served when deploying dev, we have to remove the entire node_modules/.cache folder before running yarn start

[sandilsranasinghe]

I'm on react-scripts 5.0.0 and running rm -rf node_modules/.cache/ and then yarn start helped

same issue with react-scripts-5.0.0 and this worked.
Is there a way to make it not use the cache if needed instead of having to manually delete the .cache folder though?

[nwatab]

I'm on react-scripts 5.0.0 and running rm -rf node_modules/.cache/ and then yarn start helped

This worked finally. My project is also on "react-scripts": "5.0.0",