本地正常React项目Yarn部署后Chrome报Uncaught SyntaxError: Unexpected token <

Hey there, I’ve run into this exact error dozens of times with React deployments—let’s walk through the most likely causes and how to fix them:

• Incorrect static asset path configuration
  This is the #1 culprit. What’s happening here is your browser is trying to load a JavaScript file, but instead gets your app’s index.html (which starts with <DOCTYPE html>) because the asset path is wrong.

  • Check your package.json for the homepage field. If your app is deployed at a subpath (like https://your-domain.com/my-app/), this should be set to "homepage": "/my-app/". If it’s at the root, set it to "homepage": "/" or remove it entirely.
  • After updating, re-run yarn run build and check the build/index.html file—all script and link tags should have the correct base path for your deployment.

• Misconfigured production server
  Your server might not be pointing to the build folder correctly, or isn’t handling SPA routing properly (which causes it to return index.html for missing assets).

  • For Nginx: Make sure your server block has root /path/to/your/app/build; and includes a try_files $uri $uri/ /index.html; directive to redirect all requests to index.html.
  • For Apache: Create a .htaccess file in the build folder with rewrite rules to handle SPA routes.
  • Test this directly: Try visiting the URL of one of your JS assets (e.g., https://your-domain.com/static/js/main.xyz.js). If it returns HTML instead of JavaScript, your server is misconfigured.

• Caching issues
  Old cached assets (either in your browser or a CDN) can cause mismatched references. For example, an old index.html might try to load a JS file that no longer exists, and the server returns index.html as a fallback.

  • Force a hard refresh in Chrome with Ctrl+Shift+R (or Cmd+Shift+R on Mac) to bypass browser cache.
  • If you’re using a CDN, clear its cache or ensure it’s set to respect cache-busting hashes (React adds these to asset filenames by default, so this should work if your build is correct).

• Failed or incomplete build process
  Sometimes yarn run build throws warnings or errors that you might miss, resulting in corrupted or incomplete asset files.

  • Re-run yarn run build and watch the console closely. Look for any errors about missing dependencies, syntax issues, or Babel transpilation failures.
  • Ensure your Babel configuration (in .babelrc or babel.config.js) includes the correct presets for production—@babel/preset-env should target the browsers you support, and @babel/preset-react should be present.

• Node version mismatch between local and server
  If your local Node.js version is drastically different from the server’s, yarn install might install incompatible dependencies, leading to broken builds.

  • Run node -v locally and on the server to check versions. Use a version manager like nvm to align them.
  • After aligning versions, delete the node_modules folder, re-run yarn install, then rebuild with yarn run build.

内容的提问来源于stack exchange，提问作者Chris