问题遇到的现象和发生背景
发布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的版本匹配上