React+NodeJS+MySQL项目页面无法渲染，报Unexpected token '<'及manifest.json语法错误求助

Hey there, let's tackle these two errors that are stopping your React app from rendering. I've seen these issues a bunch with full-stack React/Node/MySQL projects, so here's how to debug and fix them step by step:

1. Uncaught SyntaxError: Unexpected token '<' #

This error almost always means your browser is trying to parse a JavaScript file, but instead got an HTML document (like your index.html or a 404 page). Here's why that happens and how to fix it:

• Check your Node.js static file setup: If you're using Express, make sure you're serving your React build files correctly. You need to place the express.static middleware before any API routes or catch-all routes. For example:

  const path = require('path');
  app.use(express.static(path.join(__dirname, '../client/build'))); // Adjust the path to your actual build folder
  
  // Then add your API routes here
  app.get('/api/books', ...);
  
  // Finally, add the catch-all route for React Router
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, '../client/build/index.html'));
  });
  

  If the catch-all route comes first, every request (including for JS/CSS files) will return index.html, causing the syntax error.
• Verify your React homepage setting: Open your React project's package.json and check the "homepage" field. If your app is served from the root, set it to "." or remove it entirely. If it's hosted in a subdirectory, make sure the path matches what your Node server is using.
• Inspect the Network tab: Open Chrome DevTools > Network tab, refresh the page, and look for JS files with a 200 OK status but a Content-Type of text/html. Click into the response—if it's your index.html, that confirms the static file serving is misconfigured.

2. Manifest.json:1 Syntax Error #

This error often ties into the same root cause, but let's break down the fixes:

• Check if manifest.json is returning HTML: Use the Network tab again to look at the manifest.json request. If the response is HTML (like index.html), fix the static file serving as outlined above.
• Validate the manifest.json file: If the response is the actual manifest content, open the file and check for JSON syntax mistakes. Common issues include:
  • Missing or mismatched double quotes (JSON requires double quotes for all keys and strings)
  • Trailing commas after the last property
  • Comments (JSON doesn't support comments—remove any // or /* */ lines)
• Confirm the file location: In your React project, manifest.json should live in the public folder—this ensures it gets copied to the build directory when you run npm run build.

Once you've adjusted your static file serving and fixed any manifest syntax issues, refresh your browser. Both errors should clear up, and your React app should render as expected.

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