在服务器端口 5000 上运行应用程序时出错，Uncaught SyntaxError: Unexpected token '<' and Manifest: Line: 1, column: 1, Syntax error答案

【问题标题】：Errors when running app on server port 5000, Uncaught SyntaxError: Unexpected token '<' and Manifest: Line: 1, column: 1, Syntax error在服务器端口 5000 上运行应用程序时出错，Uncaught SyntaxError: Unexpected token '<' and Manifest: Line: 1, column: 1, Syntax error
【发布时间】：2022-02-18 20:28:32
【问题描述】：

我正在使用 React (create-react-app) 中的联系表单构建一个投资组合。我需要一些后端，以便用户可以向我的电子邮件地址发送消息。一切正常。但现在我想用 heroku 将应用程序部署到网络上。但是，当我通过尝试在服务器端口 localhost:5000 上运行应用程序来运行测试时，我得到标题中显示的这两个错误，以及一个空白文档
Uncaught SyntaxError: Unexpected token ' 清单：行：1，列：1，语法错误。
我的 manifest.json 文件看起来不错。会不会是静态文件夹里找不到css文件？

项目文件夹结构

服务器

const express = require('express')
const router = express.Router()
const cors = require('cors')
const nodemailer = require('nodemailer')
const hbs = require('nodemailer-express-handlebars')
const path = require('path')
const colors = require('colors')
const bcrypt = require('bcrypt');
const dotenv = require('dotenv')

const PORT = process.env.REACT_APP_PORT || 5000

const app = express()
app.use(cors())
dotenv.config()
app.use(express.json())

app.use(express.static(path.join(__dirname, '../myportfolio/build')))
app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, '../myportfolio', 'build', 'index.html'))
})

//removed nodemailer code

app.listen(PORT, () => console.log(`Server up and running in ${process.env.REACT_APP_NODE_ENV} 
on port ${PORT} !`.yellow))

我的 manifest.json

{
  "short_name": "Portfolio",
  "name": "my name,  Portfolio",
   "icons": [
{
  "src": "discoballicon.ico",
  "sizes": "64x64 32x32 24x24 16x16",
  "type": "image/x-icon"
},
{
  "src": "logo192.png",
  "type": "image/png",
  "sizes": "192x192"
},
{
  "src": "logo512.png",
  "type": "image/png",
  "sizes": "512x512"
}
],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

【问题讨论】：

好吧，如果它说有Unexpected token '<' 那么可能有，再次检查你的文件，也许你在那个文件中有合并冲突，git自动添加了“
没那么简单，就像我提到的我的 manifest.json 文件是好的。从字面上看，意外的标记“

标签： javascript node.js reactjs express server

【解决方案1】：

问题解决了，在github上找到了答案：
https://github.com/facebook/create-react-app/issues/1812
运行 npm build 时，您可以看到：

该项目是在假设它托管在 /portfolio/ 的情况下构建的。
您可以使用 package.json 中的主页字段来控制它。

问题是服务器上的路径不正确。它看起来像这样：

app.use(express.static(path.join(__dirname, '../frontend/build/static')))

必须是：

app.use('/showcaseportfolio', express.static(path.join(__dirname, '../frontend/build')))

现在它在 localhost:5000/portfolio 上运行

【讨论】：