javascript React应用抛出Uncaught SyntaxError:在Google App Engine上运行时出现意外标记“〈”

dauxcl2d  于 2023-04-04  发布在  Java
关注(0)|答案(1)|浏览(149)

我的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查询,否则它会将您重定向到打开应用程序的前一页)。

aurhwmvo

aurhwmvo1#

因为我自己也是刚刚遇到这个问题,也没有找到一个确切的答案。
这是因为app.get('/*')路由会捕获任何与之前声明的路由或静态路径不匹配的请求。因此,应用程序不会提供正确的js/css/image等,而是提供index.html文件。因此,出现了意外的'〈'令牌。
这可能意味着(至少)两件事:
1.**您没有为有问题的文件声明静态路由。**这似乎不是上面问题中的情况。
1.**静态路由可能存在,但文件不存在。**在这种情况下,express将移动到catch-all路由并提供index.html。正如提问者所提到的,如果你想完全避免,在app.yaml中使用静态目录的URL模式处理程序确实会阻止express这样做。
在我的例子中,我的浏览器缓存了一个过时的index.html文件,其中引用了不再存在的css/js构建文件,硬刷新修复了它。🥴

相关问题