react-scripts start is serving old data

Lagicrus commented 3 years ago

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

Create a CRA App
start the server to serve it to the client to work on
add a error
fix the error
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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

aaronisrael commented 3 years ago

Try to delete .eslintcache and restart. This is most likely to do with https://github.com/facebook/create-react-app/issues/10161

petesmc commented 3 years ago

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

Incorrect errors or mising errors displayed
Cached files served

gragland commented 3 years ago

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 commented 3 years ago

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 commented 2 years ago

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 commented 2 years ago

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

aetherealtech commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

Also having this issue on react-scripts@5.0.0

karimkawambwa commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

If anyone here is using plugin:@typescript-eslint/recommended-requiring-type-checking there's a known incompatibility: https://github.com/typescript-eslint/typescript-eslint/issues/4694#issuecomment-1075389608

ghost commented 1 year ago

Add workaround into your package.json

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

then restart your dev server ^c npm start

Poyoman39 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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

nikoloza commented 1 year ago

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

p145085 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

leifenberg commented 1 year ago

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

nikoloza commented 1 year ago

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

Remove module caches

rm -rf node_modules/.cache

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 commented 1 year ago

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

splendidbug commented 1 year ago

"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 commented 1 year ago

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

LivingInLimbo commented 1 year ago

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

fabpico commented 1 year ago

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 commented 4 months ago

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 commented 3 months ago

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

drewg2009 commented 3 months ago

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

facebook / create-react-app