React 应用程序在使用 react-scripts start 运行时工作正常，但在构建时出现“意外语法错误：意外令牌：<”

Question

我正在尝试使用快速服务器和反应脚本构建来提供我构建的投资组合网站。 当我运行 react-scripts start 时，应用程序运行良好。 但是，当我提供构建 index.js 时，应用会遇到以下错误：

2.8b4a0c83.chunk.js:1 Uncaught SyntaxError: Unexpected token '<'

main.4e27e21d.chunk.js:1 Uncaught SyntaxError: Unexpected token '<'

manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.

我很确定它不是服务器文件，因为它正在提供正确的文件，但我不知道还有什么地方可以调试。 如果您知道发生了什么，我可以发布您要求的任何代码。

代码

服务器.js

require("dotenv").config();
var express = require("express");
var router = express.Router();
var nodemailer = require("nodemailer");
var cors = require("cors");
const PORT = process.env.PORT || 8080;
const bodyParser = require("body-parser");
const path = require("path");
const app = express();
const root = path.join(__dirname, "/build");

app.use(cors());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(express.static(root));

app.get("*", function (req, res) {
  res.sendFile("/index.html", { root });
});

var transport = {
  service: "gmail",
  auth: {
    user: process.env.USER,
    pass: process.env.PASS,
  },
};

var transporter = nodemailer.createTransport(transport);

transporter.verify((error, success) => {
  if (error) {
    console.log(error);
  } else {
    console.log("Transporter is ready");
  }
});

router.post("/send", (req, res, next) => {
  var name = req.body.name;
  var author = req.body.author;
  var email = req.body.email;
  var content = `name: ${name} \n email: ${author} \n message: ${email}`;

  var mail = {
    from: name,
    to: "emailHere",
    subject: "New Message From Portfolio Site",
    text: content,
  };

  transporter.sendMail(mail, (err, data) => {
    if (err) {
      console.log(err);
      res.json({
        status: "failed",
      });
    } else {
      console.log("yeees");
      res.json({
        status: "success",
      });
    }
  });
});

app.use(express.json());
app.use("/", router);
app.listen(PORT, () => {
  console.log("Server is running on " + PORT);
});

Package.json

{
  "name": "react-portfolio",
  "proxy": "http://localhost:8080",
  "homepage": "https://SquidDOTjpeg.github.io/react-portfolio/",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.19.2",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "nodemailer": "^6.4.10",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "both": "run-p dev start",
    "dev": "react-scripts start",
    "start": "node server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "heroku-postbuild": "npm i && npm run build"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "express-pino-logger": "^5.0.0",
    "gh-pages": "^3.0.0",
    "node-env-run": "^3.0.2",
    "nodemon": "^2.0.4",
    "npm-run-all": "^4.1.5",
    "pino-colada": "^2.0.1"
  },
  "description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/SquidDOTjpeg/react-portfolio.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/SquidDOTjpeg/react-portfolio/issues"
  }
}

Answer 1

只需删除

"homepage": "https://SquidDOTjpeg.github.io/react-portfolio/"

来自你的package.json

Answer 2

问题是您一直在尝试在 Github 页面和 heroku 页面上部署网站，因此您为这两个页面配置了 package.json 文件。 您需要做的就是删除

"homepage": "https://SquidDOTjpeg.github.io/react-portfolio/"

来自您的package.json 文件。 如果您想部署该应用程序，您需要将其保留在那里，否则该应用程序将无法在 gh-page 上运行。