Index.html не рендерит компонент при обслуживании через Express

Question

Я в конце этого урока https://www.freecodecamp.org/news/how-to-deploy-a-react-app-with-an-express-server-on-heroku-32244fe5a250/

и изменил мой App.js следующим образом:

import React, { Component } from "react";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div>
        <p>lmfao</p>
      </div>
    );
  }
}

export default App;

Теперь, к сожалению, покапосещение localhost: 5000 после запуска « npm run dev », хотя в заголовке страницы написано «React App», а источником страницы является index.html, компонент приложения не отображается инигде нет ошибок.

Вот изображение посещения localhost: 5000, которое дает index.html

Теперь забавно, если я захожу на сервер React на localhost: 3000, компонент рендерится.

Чего мне не хватает? Большое спасибо

PS Вот Server.js

const express = require("express");
const app = express();
const path = require("path");
const port = process.env.PORT || 5000;

// Static file declaration
app.use(express.static(path.join(__dirname, "client/build")));

// production mode
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'));  })
}

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

// start server
app.listen(port, (req, res) => {
  console.log(`server listening on port: ${port}`);
});

Вот зависимости в package.json:

"devDependencies": {
    "eslint": "^6.5.1",
    "eslint-config-standard": "^14.1.0",
    "eslint-plugin-flowtype": "^4.3.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-node": "^10.0.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.16.0",
    "eslint-plugin-react-hooks": "^2.1.2",
    "eslint-plugin-standard": "^4.0.1"
  },
  "dependencies": {
    "concurrently": "^5.0.0",
    "express": "^4.17.1",
    "react-router-dom": "^5.1.2"
  }

EDIT : по запросувот ссылка на github для проекта: https://github.com/Dobermensch/ExpressTest.git Вам нужно будет выполнить npm как для папки ExpressTest , так и для client подпапка

Answer 1

Наиболее вероятная причина, по которой вы получаете пустую страницу, заключается в том, что пакет (ы) скрипта не могут быть загружены.

В браузере щелкните правой кнопкой мыши пустую страницу и выберите «Просмотреть исходный код страницы» или подобное меню. ,Вы увидите содержимое файла .html, включая теги <script>, указывающие на файл (ы) /some-path/some-name.js. Все или некоторые из этих файлов не могут быть загружены. Чтобы убедиться в этом, просто загрузите пакет вручную, указав в браузере localhost:5000/some-path/some-name.js. Если пакет сценариев не может быть загружен, добавьте маршрут в Express.