Почему мое приложение Create-React-App не отображается, когда я обслуживаю файл индекса. html с Express для Heroku? - PullRequest
0 голосов
/ 16 апреля 2020

Я нашел свою проблему, но не знаю, как ее решить. В моем развернутом приложении Heroku в консоли появляются ошибки: «Uncaught SyntaxError: Неожиданный токен« <»для чанка. js. Похоже, что Chunk. js приходит как HTML файл вместо JS файла. Это происходит потому, что в моем файле маршрутов. js он обслуживает файл индекса. html в конечной точке перехвата ('/ *'). Я не верю, что веб-браузер может найти мой кусок. js и манифест. json файлов. Когда я удаляю свою конечную точку перехвата и покидаю конечную точку ('/'), я получаю модуль 404, который не обнаружил ошибку для всех файлов в моей папке сборки. Это может помочь узнать, что мое приложение React использует маршрутизацию для разных страниц. </p>

Кроме того, мое приложение работает, когда я запускаю его локально с двумя отдельными серверами (клиентский сервер и внутренний сервер). Но я не могу заставить его работать, обслуживая stati c файлы из папки сборки React. Мне нужно предоставить stati c файлов для производства.

Вот мои маршруты. js file:

var ObjectID = require('mongodb').ObjectID
const express = require('express')
const app = express()

const root = require('path').join(__dirname,"../client","build")
app.use(express.static(root))

module.exports = function(app, db) {

    app.get('/categories', (req, res) => {
        const categories = {
            "categories": ["Gas", "Dining", "Groceries", "Online Shopping", "Travel", "Other"],
            "cardtype": ["Visa", "Amex", "Mastercard", "Discover"],
            "interest": [1,1.5,2,2.5,3,3.5,4,4.5,5,5.5,6]
        }
        res.send(categories);
    });
}

    app.get('/', (req, res) => {
        res.sendFile("index.html", {root})
    });

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

Моя посылка. json Файл в клиенте

{
  "name": "frontend",
  "version": "0.1.0",
  "homepage": "https://myappurl.herokuapp.com/",
  "proxy":"http://localhost:5000/",
  "private": true,
  "engines": {
    "npm": "6.13.4",
    "node": "12.15.0"
  },
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "bootstrap": "^4.4.1",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.0",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "stop": "taskkill -F -IM node.exe"
  },
  "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": {
    "@babel/preset-env": "^7.9.5"
  }
}

Ошибки, которые я получаю в консоли enter image description here

Каталог файлов enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...