React打包并发布网页后打包文件报语法错误

问题遇到的现象和发生背景

发布React app 网站网页空白并报错，查看错误报告发现build文件加中有三个文件出现语法错误，然而build后的文件无法阅读无法debug

遇到的现象和发生背景，请写出第一个错误信息

npm run build本身无报错报错，npm start 能够正常运行网页。然而deploy后出现网页空白，报了3个来自build后的文件的语法错误。尝试过在safari，chrome，edge，均为同现象。

用代码块功能插入代码，请勿粘贴截图。不用代码块回答率下降 50%

package.json

{
  "name": "dragoncourt",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://www.westdaledragoncourt.com/react/DragonCourt/",
  "dependencies": {
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "bootstrap": "^4.4.1",
    "classnames": "^2.3.1",
    "jquery": "^3.6.0",
    "leaflet": "^1.7.1",
    "leaflet.markercluster": "^1.5.0",
    "lodash": "^4.17.21",
    "magnific-popup": "^1.1.0",
    "moment": "^2.29.1",
    "react": "^17.0.2",
    "react-bootstrap": "^1.6.0",
    "react-datepicker": "^4.1.0",
    "react-dom": "^17.0.2",
    "react-js-pagination": "^3.0.3",
    "react-leaflet": "^2.7.0",
    "react-meta-tags": "^1.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-scroll-parallax": "^2.4.0",
    "react-slick": "^0.28.1",
    "slick-carousel": "^1.8.1",
    "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"
    ]
  }
}

运行结果及详细报错内容

网页空白并报错
Uncaught SyntaxError: Unexpected token '<' in 5.be2e5389.chunk.js:1
Uncaught SyntaxError: Unexpected token '<' in main.e61bc115.chunk.js:1
Manifest: Line: 1, column: 1, syntax error

我的解答思路和尝试过的方法，不写自己思路的，回答率下降 60%

由于报错文件为build后的文件，没有可读性，又因为npm start后打开的网页完全没有问题，问题仅可能来源于npm run build, 但是对于npm run build本身不报错，发布后的网站却出现了错误，我实在是没有解决这个问题的想法，以上我附上了我的package.json，我初步推测是各个插件的版本出现了不匹配的现象，但是我也不知道要怎么使得各个插件版本都匹配上

我想要达到的结果，如果你需要快速回答，请尝试 “付费悬赏”

我想要解决这个发布后网页报错的问题，同时我也想要了解并学会如果将npm install的各个module的版本匹配上

提供参考实例【解决 Uncaught SyntaxError: Unexpected token ‘＜‘ 错误解决方法】，链接：https://blog.csdn.net/weixin_43742708/article/details/110594790

首先呢建议你使用浏览器的开发者工具查看详细的错误信息，根据错误信息尝试解决问题。

如果错误信息没有提供足够的信息，您可以尝试在开发环境中使用** source-map-explorer **分析打包后的文件结构，查找可能存在问题的文件。

此外，还可以尝试使用 eslint 工具检查代码中的语法错误，或者使用 prettier 工具格式化代码，帮助您发现并解决可能存在的语法问题。

发布 React app 网站时遇到了网页空白的问题，并在查看错误报告时发现了来自 build 文件中的三个文件出现的语法错误。您尝试使用了不同的浏览器，但结果都是相同的。

可以尝试以下步骤来解决这个问题：

检查您在编写代码时是否有语法错误。可以使用诸如 ESLint 等工具来帮助检查代码中的语法错误。
尝试使用 source-map-explorer 工具来查看您的代码哪些部分占用了大量空间，并考虑优化这些代码。
尝试使用浏览器的开发者工具来查看错误信息，并根据错误信息尝试修复问题。
如果以上步骤都没有解决问题，可以尝试提交一个 issue 到您的项目的 issue tracker 上，并附上相关的错误信息和代码。这样其他人就可以帮助您解决问题了。

react项目打包报错
借鉴下
https://blog.csdn.net/oldchao/article/details/126927683