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",

[jld-adriano]

Also having this issue on [email protected]

[karimkawambwa]

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

I experienced this too rm -rf node_modules/.cache/ worked for me

[thiago-js]

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

rm -rf node_modules/.cache/ worked for me thanks

[codebutler]

If anyone here is using plugin:@typescript-eslint/recommended-requiring-type-checking there's a known incompatibility: typescript-eslint/typescript-eslint#4694 (comment)

[ghost]

Add workaround into your package.json

"scripts": {
    "prestart": "rm -rf node_modules/.cache/",
    ...
}

then restart your dev server ^c npm start

[Poyoman39]

@pull-task-dev i would not do that if I expect CRA to start quickly. On big projects you have to wait more than one minute when cache has to be generated

[JoshMcCullough]

Still seeing this when hand-jamming something in node_modules to test a fix quickly. Have to rm -rf node_modules/.cache; npm start to get those changes to be built. We're using CRA v5.0.1 -- any fix?

[fabpico]

This is still happening today with the latest release v5.0.1.

[nikoloza]

rm -rf node_modules/.cache/ throws error require is not defined

[p145085]

Not specifically 'create-react-app' but I am having the same issue in a 'Svelte'-project and it might be related.

• Saving file.
• Refresh web-page.
• Ctrl + F5 web-page.
• Re-run 'npm run dev'.
• 'npm cache clean --force'.
• 'npm rebuild'.
• Remove 'node_modules' and re-install.
• Reboot machine.
• Create new project in VSC.

These are the steps I've taken to no effect.

[Tiagoperes]

Just happened to me. Removing eslint cache didn't work. Removing the whole .cache folder did the job. I'm using version 5.0.1 of React Scripts.

[JoshMcCullough]

This seems like a pretty big "oopsie" -- would love to hear some official comment on when it'll be fixed, etc.

[leifenberg]

"rm -rf node_modules/.cache; npm start" worked for a while and then stopped working for me

[nikoloza]

"rm -rf node_modules/.cache; npm start" worked for a while and then stopped working for me

1. Remove module caches

rm -rf node_modules/.cache

2. Cleaning cache on the browser

const clearCacheData = () => {
  caches.keys().then((names) => {
    names.forEach((name) => {
      caches.delete(name)
    })
  })
  console.log('Complete Cache Cleared')
}

function App () {
  useEffect(() => clearCacheData(), [])

[ulitol97]

Same issue. Removing
node_modules/.cache completely is what solved it for me. Otherwise, I couldn't get relative-deps to work.

[splendidbug]

"rm -rf node_modules/.cache; npm start" worked for a while and then stopped working for me

1. Remove module caches

rm -rf node_modules/.cache

2. Cleaning cache on the browser

const clearCacheData = () => {
  caches.keys().then((names) => {
    names.forEach((name) => {
      caches.delete(name)
    })
  })
  console.log('Complete Cache Cleared')
}

function App () {
  useEffect(() => clearCacheData(), [])

removing .cache wasn't working for me on 5.0.1. Removed browser cache and it's working fine now. Thanks

[gdfbarbosa]

This error is still happening and removing node_modules/.cache solved it. Any updates on this error? 🤔

[LivingInLimbo]

+1 for rm -rf node_modules/.cache, was having this issue when trying to use react-scripts build and that command solved it

[fabpico]

They seem to have given up to its react-scripts.

(and if it’s anything like the ones we’ve made in the past, more haphazardly designed).

They promote 3rd party frameworks like Next.js.

If you want to build a new app or a new website fully with React, we recommend picking one of the React-powered frameworks popular in the community.

Is this issue still necessary in this case?

[phoenixstudiodz]

After going through most of these solutions, none of them worked, I was planning to re-install Node.js or try other versions.
I discovered that the problem was not caused by react rather it was the web browser cache!

[efkan]

Re-cloning code from its repo has solved my issue.

[drewg2009]

I do not have an .eslintcache file. Clearing the node_modules\cache doesn't appear to solve the problem.

I tried recloning and clearing all browser history and cache, and restarting the computer.

However it still continues to toggle between older and newer style code.

Sometimes it will show the notes column with the flex property allowing it to stretch as well as other styles

and most of the time it shows older styles without the flex properties

Not sure what is causing it. Refreshing the page can even yield different renderings.

I even tried deploying to a live environment and it has the exact same behavior which is very strange. Maybe it's something with the library rather than react. I am using Material UI