为什么前端和后端运行没有任何错误，浏览器却显示空白内容？

Question

我的 MERN-Stack 应用程序在浏览器中呈现空白内容时遇到问题，尽管前端和后端运行没有任何错误。

在浏览器中，通过检查出现两个错误；

1. 未捕获的语法错误：意外的标记“<”在 main.b4d4fd26.js:1

2. Manifest: 行：1，列：1，manifest.json:1 中存在语法错误

解决方案是什么？

服务器：

const express = require("express");
const { ApolloServer } = require("apollo-server-express");
const path = require("path");
// require("dotenv").config();
require("dotenv").config({ path: path.resolve(__dirname, ".env") });

const { typeDefs, resolvers } = require("./schemas");
const { authMiddleware } = require("./utils/auth");
const db = require("./config/connection");

const PORT = process.env.PORT || 5000;
const app = express();

const server = new ApolloServer({
  typeDefs,
  resolvers,
  context: authMiddleware,
  // These two lines below enable the playground when deployed to heroku. You can remove them if you don't want this functionality
  introspection: true,
  playground: true,
});

server.applyMiddleware({ app });

app.use(express.urlencoded({ extended: false }));
app.use(express.json());

if (process.env.NODE_ENV === "production") {
  app.use(express.static(path.join(__dirname, "../client/build")));
}

app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname, "../client/build/index.html"));
});

db.once("open", () => {
  app.listen(PORT, () => {
    console.log(`Server running on port http://localhost:${PORT}`);
    console.log(`Use GraphQL at http://localhost:${PORT}${server.graphqlPath}`);
  });
});

Manifest.json 文件：

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.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"
}

Answer 1

发现问题...

所以为了在本地机器上运行应用程序，前端和后端都需要运行。如果前端和后端都有自己的根目录，则可以单独完成此操作。但是，执行此操作的正确方法是在终端中运行 npm rundevelop。这使得应用程序的两个服务器都可以充分发挥功能。

作为新人的好处...