2

I "inherited" a create-react-app on which I am updating some functionality. I am familiar with JS and can code in React, but I do not know much about webpack, npm, hot reload or the rest of the process that eases the life of the developers.

Unfortunately, when trying to debug this app, the debugger doesn't stop on breakpoints, neither in Chrome nor in Firefox. This answer suggests that the problem appears when a script appears twice. And indeed, in my firefox, one of the pages is loaded twice:

Screenshot of the first copy

Screenshot of the second copy

Obviously they cannot both exist on this in the same directory. But for some reason, the browser displays and probably runs both.

How can I identify where they come from and disable it, in order to regain control over my debugger? I believe it has something to do with webpack, hot reloading and source maps.

Edit: If I restart firefox, then all is well, there is only one copy of the source. However, after I modify the file and the page automatically refreshes, I again end up with 2 copies. So it is clearly something dubious about this hot reloading ...

Ciprian Tomoiagă
  • 3,773
  • 4
  • 41
  • 65

1 Answers1

1

This seems to be an issue with the browser caching an older version.

I've also noticed that only one version will stop on breakpoints and the other will just ignore them.

This post shows you which file is cached and which is the real one: https://stackoverflow.com/a/53877858/373207

Disabling the cache should be possible in the server serving the js files. For create-react-app this can be done by changing the start command to be:

react-scripts start --no-cache

source: https://github.com/facebook/create-react-app/issues/6074#issuecomment-494720199

Berty
  • 1,081
  • 1
  • 18
  • 49