MERN ไม่สามารถปรับใช้กับ heroku ได้

ฉันกำลังพยายามเรนเดอร์แอป React ผ่าน NodeJS และปรับใช้บน Heroku แต่ดูเหมือนว่าฉันจะมีปัญหานี้ในเบราว์เซอร์

Uncaught SyntaxError: โทเค็นที่ไม่คาดคิด '‹'

และหน้านั้นเป็นหน้าเปล่าสีขาว

ฉันลองวิธีแก้ปัญหาหลายอย่างแล้ว แต่ดูเหมือนจะไม่รู้ว่ามีอะไรผิดปกติ และเหตุใดหน้าแรกจึงไม่แสดงขึ้นมา

Package.json ของฉันใน NodeJS


{
  "name": "portfolio-app",
  "version": "1.0.0",
  "description": "a simple app",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build",
    "start": "node app.js",
    "client": "cd client && npm run start",
    "dev": "concurrently -n 'server,client' -c 'red,green'  \"nodemon app.js\" \"npm run client\""
  },

  "dependencies": {
    "body-parser": "^1.19.0",
    "concurrently": "^5.2.0",
    "create-react-app": "^3.4.1",
    "express": "^4.17.1",
    "mongoose": "^5.9.6",
    "nodemon": "^2.0.2"
  },
  "engines": {
    "node": "10.x"
  }
}


package.json ของฉันในแอป React

{
  "name": "client",
  "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",
    "history": "^4.10.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "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"
    ]
  },
  "proxy": "http://localhost:8080"
}

ไฟล์เซิร์ฟเวอร์ app.js ของฉัน:

const express    = require('express'),
      app        = express(),
      bodyParser = require('body-parser'),
      nav        = require('./routes/navigation'),
      path       = require('path'),
      PORT       = process.env.PORT || 8080;

/* Settings */
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static(__dirname + '/public'));



/*Production settings*/
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'));
  });
}



/* Starting server */ 
app.listen(PORT, () => {
  console.log(`APP IS RUNNING ON PORT  ${PORT}`);
});

person Ahmed Gaafer    schedule 09.05.2020    source แหล่งที่มา
comment
ปัญหาน่าจะเกิดจากการพิมพ์ผิดในแอปโต้ตอบของคุณ มองหาส่วนประกอบหรือบางอย่างที่มี ‹ ที่ไม่ได้ปิด   -  person justin    schedule 09.05.2020


คำตอบ (2)


หลังจากการค้นคว้า ฉันพบว่าปัญหาอยู่ที่ตัวสร้าง Heroku ดังนั้นฉันจึงเพิ่มตัวสร้างนี้ในแอป Heroku:

https://elements.heroku.com/buildpacks/mars/create-react-app-buildpack

และปัญหาก็ได้รับการแก้ไข

person Ahmed Gaafer    schedule 09.05.2020

ฉันคิดว่าปัญหากับ Heroku และฉันชอบที่จะแยกแบ็กเอนด์และฟรอนต์เอนด์โดยกดแอปโต้ตอบของคุณไปที่ netlify และแบ็กเอนด์โหนดของคุณไปที่ heroku

person ahmed khaled    schedule 09.05.2020