Netlify部署React应用遇Uncaught SyntaxError缓存问题求助

This error is a classic cache mismatch issue—here's exactly what's going on:
When you deploy a new version to Netlify, your users' browsers are still holding onto a cached copy of the old index.html. That old HTML references JavaScript/CSS files with content-hashed filenames (like main.abc123.js) that have been replaced or deleted in the new deployment. When the browser tries to fetch those missing files, Netlify returns a 404 HTML page instead of the expected JS. The browser tries to parse this HTML as JavaScript, hence the Unexpected token < error. Refreshing works eventually because the browser finally fetches the updated index.html with the correct asset paths.

Here's how to fix this permanently:

1. Enforce Proper Caching with Netlify _headers File #

Create a _headers file in your project root directory to control how browsers cache your assets:

/*
  Cache-Control: public, max-age=0, must-revalidate
/index.html
  Cache-Control: public, max-age=0, must-revalidate
/static/*
  Cache-Control: public, max-age=31536000, immutable

• This tells browsers to always revalidate index.html (never cache it long-term) so they pull the latest version right after deployment.
• Hashed static assets (in /static/) can be cached indefinitely because their filenames change with every deployment—immutable tells browsers they never need to recheck these files.

2. Update Service Worker to Prompt for Refreshes #

React's default registerServiceWorker can hold onto old cached assets. Modify it to notify users when a new version is ready:
In src/utility/registerServiceWorker.js, update the logic that handles new service workers:

// Look for this section and tweak it:
if (registration.waiting) {
  registration.waiting.postMessage({ type: 'SKIP_WAITING' });
  // Prompt user to refresh immediately
  if (window.confirm('A new version of the app is available! Click OK to update.')) {
    window.location.reload();
  }
}

This ensures users get the new version right away instead of hitting stale cached assets.

3. Clean Up Unnecessary Script in index.html #

Remove the babel-standalone script tag—you don't need this in production! React's build process already compiles your code to browser-compatible JS, and this extra script adds unnecessary load time and potential cache conflicts:

<!-- Delete this line from your index.html -->
<script type="text/javascript" src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

4. Fix manifest.json Path #

Update the start_url to use ./ instead of ./index.html—this avoids issues with cached manifest files pointing to old HTML paths:

{
  "start_url": "./",
  // ... rest of your manifest content
}

5. Verify React Build Configuration #

Ensure your package.json uses the standard build command that generates hashed filenames (Create React App does this by default):

{
  "scripts": {
    "build": "react-scripts build"
  }
}

Don't modify this command unless you're confident you understand how asset hashing works—this is critical for ensuring old assets are never confused with new ones.

After implementing these changes, redeploy to Netlify. Your users should no longer see the blank page error after new deployments, as the browser will always fetch the latest index.html and reference the correct assets.

内容的提问来源于stack exchange，提问作者F. Morival