我的package.json
:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"engines": {
"node": "14.x.x"
},
"dependencies": {
"@ant-design/icons": "^4.7.0",
"@codemirror/lang-python": "^0.19.2",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"@uiw/react-codemirror": "^4.1.0",
"antd": "^4.16.13",
"axios": "^0.24.0",
"codemirror": "^5.63.3",
"express": "^4.17.1",
"pushstate-server": "^3.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-hook-form": "^7.18.0",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "node server.js",
"start-dev": "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"
]
}
}
app.yaml
:
env: standard
runtime: nodejs14
我的server.js
文件,我通过它运行应用程序:
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(8080);
它在8080端口上启动express服务器,并为build
目录提供服务。当我在localhost上运行它时,它工作得很好。但是当我使用gcloud app deploy
命令在Google App Engine上部署它时,它打开应用程序并在控制台中写入以下内容:
Uncaught SyntaxError: Unexpected token '<' 2.cf168530.chunk.js:1
Uncaught SyntaxError: Unexpected token '<' main.3ec04766.chunk.js:1
Screenshot with the error。另外,如果有用的话,这是我的app的URL(请不要删除id
查询,否则它会将您重定向到打开应用程序的前一页)。
1条答案
按热度按时间aurhwmvo1#
因为我自己也是刚刚遇到这个问题,也没有找到一个确切的答案。
这是因为app.get('/*')路由会捕获任何与之前声明的路由或静态路径不匹配的请求。因此,应用程序不会提供正确的js/css/image等,而是提供index.html文件。因此,出现了意外的'〈'令牌。
这可能意味着(至少)两件事:
1.**您没有为有问题的文件声明静态路由。**这似乎不是上面问题中的情况。
1.**静态路由可能存在,但文件不存在。**在这种情况下,express将移动到catch-all路由并提供index.html。正如提问者所提到的,如果你想完全避免,在app.yaml中使用静态目录的URL模式处理程序确实会阻止express这样做。
在我的例子中,我的浏览器缓存了一个过时的index.html文件,其中引用了不再存在的css/js构建文件,硬刷新修复了它。🥴