运行 npm 运行构建后反应应用程序更改未更新

Question

I have a react app with the following file structure:

When I run npm run build the app compiles everything using webpack and npm gives me the following output:

In the output (build folder), it creates an asset-manifest.json file, containing the newly created files:

{
  "files": {
    "main.css": "/static/css/main.607e5368.chunk.css",
    "main.js": "/static/js/main.08012c8a.chunk.js",
    "main.js.map": "/static/js/main.08012c8a.chunk.js.map",
    "runtime~main.js": "/static/js/runtime~main.a8a9905a.js",
    "runtime~main.js.map": "/static/js/runtime~main.a8a9905a.js.map",
    "static/css/2.8643d4fb.chunk.css": "/static/css/2.8643d4fb.chunk.css",
    "static/js/2.1aae919f.chunk.js": "/static/js/2.1aae919f.chunk.js",
    "static/js/2.1aae919f.chunk.js.map": "/static/js/2.1aae919f.chunk.js.map",
    "index.html": "/index.html",
    "precache-manifest.ca81004b99ff7fc6f769d98332234f01.js": "/precache-manifest.ca81004b99ff7fc6f769d98332234f01.js",
    "service-worker.js": "/service-worker.js",
    "static/css/2.8643d4fb.chunk.css.map": "/static/css/2.8643d4fb.chunk.css.map",
    "static/css/main.607e5368.chunk.css.map": "/static/css/main.607e5368.chunk.css.map",
    "static/media/index.scss": "/static/media/slick.f97e3bbf.svg"
  }
}

However, if I go into my browser the react app doesn't update and keeps using the old filenames. If I go to the network inspector I can see that the files are loaded with 200 OK (from ServiceWorker) .

Why are the newly genrated files not being used in the new index.html?

I've tried clearing my cache, using a clean installation of the template, using another browser, using incognito mode,...

Answer 1

It is due to service worker. Unregister your service worker to show updated content

In your index.js or whatever is main file in react app

// import registerServiceWorker from './registerServiceWorker'; // comment this line
import { unregister } from './registerServiceWorker';

Comment registerServiceWorker()

// registerServiceWorker() 
unregister();// add this