React项目bundle.js报Uncaught SyntaxError: Unexpected token '<'求助

我遇到了如下报错，尝试参考相关帖子步骤排查，但该方案不适用于我的场景，因为我没有使用babel。目前bundle.js、vendor.js、main.chunk.js三个js文件都报相同错误，我是React新手，恳请各位给出排查建议。

报错信息 #

Uncaught SyntaxError: Unexpected token '<' bundle.js:1 

相关代码/配置 #

index.html #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />

  <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop.
    -->
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
  <title>React App</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
</body>

</html>

.env配置文件 #

PORT=8080
PUBLIC_URL=http://reporting-front-end.p-lg6gp.c-f5nnh.use2.nonprod.cps.aws.cloud.bank-dns.com/cctra-reporting

index.js #

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import registerServiceWorker from 'react-service-worker';

import Client from 'aws-appsync';
import { ApolloProvider } from 'react-apollo';
import { Rehydrated } from "aws-appsync-react";
import AppSync from './AppSync';

const client = new Client({
  url: AppSync.aws_appsync_graphqlEndpoint,
  region: AppSync.aws_appsync_region,
  auth: {
    type: 'API_KEY',
    apiKey: AppSync.aws_appsync_apiKey
  }
})


ReactDOM.render(
  <ApolloProvider client={client}>
    <Rehydrated>
      <App />
    </Rehydrated>
  </ApolloProvider>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: 
reportWebVitals();
registerServiceWorker();

package.json #

{
  "name": "reporting-front-end",
  "version": "0.1.0",
  "private": true,
  "homepage": "/cctra-reporting",
  "dependencies": {
    "@babel/core": "^7.15.0",
    "@react-native-community/async-storage": "^1.12.1",
    "@react-native-community/netinfo": "^5.9.10",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "@types/react": "^16.14.12",
    "@usb-shield/design-tokens": "^3.18.1",
    "@usb-shield/react-button": "^1.0.4",
    "@usb-shield/react-divider-line": "^2.0.0",
    "@usb-shield/react-dropdown": "^2.0.0",
    "@usb-shield/react-icons": "^1.0.3",
    "@usb-shield/react-tabs": "^1.10.2",
    "@usb-shield/themes": "^0.6.11",
    "apollo-client": "^2.6.10",
    "apollo-link": "^1.2.14",
    "aws-appsync": "^4.1.1",
    "aws-appsync-react": "^4.0.7",
    "cra-template": "1.1.2",
    "eslint": "^7.31.0",
    "graphql": "^14.7.0",
    "graphql-tag": "^2.12.5",
    "https-proxy-agent": "^5.0.0",
    "install": "^0.13.0",
    "react": "^16.14.0",
    "react-apollo": "^2.4.0",
    "react-dom": "^16.14.0",
    "react-native": "^0.59.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-service-worker": "^0.1.1",
    "sass": "^1.35.2",
    "typescript": "^2.8.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

相关截图 #

• 项目文件夹结构：
• 报错截图：
• 浏览器网络请求面板截图：
• bundle.js的响应内容截图：

该报错本质是浏览器请求JS资源时，服务器返回了HTML内容（开头的<就是HTML的DOCTYPE标签首字符），浏览器把HTML当做JS解析就会抛出此错误，结合你的配置可按以下步骤排查：

• 修正PUBLIC_URL和homepage的配置冲突：package.json里已经配置了homepage: "/cctra-reporting"，.env里的PUBLIC_URL不需要填写完整域名，改成PUBLIC_URL=/cctra-reporting即可，全路径的PUBLIC_URL会导致开发环境下静态资源路径异常。
• 检查环境访问路径：本地执行npm start启动时，不要直接访问部署域名，走本地http://localhost:8080/cctra-reporting访问；如果是部署到生产环境，确认Nginx/Apache等服务端配置的静态资源根目录对应build文件夹，且rewrite规则正确，所有非静态资源的请求都fallback到index.html，避免JS资源路径被路由拦截返回index.html。
• 检查build产物：执行npm run build后，打开build文件夹下的index.html，查看里面注入的script标签的src路径是否为/cctra-reporting/static/js/xxx.js格式，确认路径和部署路径匹配。
• 临时排查方案：可以先注释掉.env里的PUBLIC_URL配置，删除package.json里的homepage字段，本地启动看是否还报错，先排除路径配置错误的问题。

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