将 MERN 应用程序部署到 Heroku 后缺少 React 组件

Question

我向 Heroku 部署了一个 MERN 应用程序（使用 MongoDB Atlas 作为数据库），但主页未呈现登录或注册表单。我检查了 Heroku 日志是否有任何错误，没有错误。此外，当我检查元素时，我看到元素在那里，但 React 组件没有呈现。只有 CSS 背景图像正在渲染。我的 heroku-postbuild 脚本有问题吗？谢谢enter image description here

Heroku 应用托管在“https://glacial-gorge-15530.herokuapp.com/login”。下面是我的 server.js 和 package.json 文件。我还添加了登录页面的开发与生产屏幕截图图像。

server.js

const express = require('express');
const connectDB = require('./config/db');
const path = require('path');

const app = express();

//Connect Database
connectDB();

//Init middleware
app.use(express.json({ extended: false }));

//Define routes
app.use('/api/users', require('./routes/users'));
app.use('/api/auth', require('./routes/auth'));
app.use('/api/recipes', require('./routes/recipes'));

//Serve static assets in production
if(process.env.NODE_ENV === 'production') {
    //Set static folder
    app.use(express.static('client/build'));

    app.get('*', (req, res) => res.sendFile(path.resolve(__dirname,'client', 'build', 'index.html')));
}

const PORT = process.env.PORT || 5000;

app.listen(PORT, () => console.log(`Server started on port ${PORT}`));

package.json

{
  "name": "favorite-recipes-2",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "client": "0.0.1",
    "config": "^3.3.1",
    "create-react-app": "^3.4.1",
    "express": "^4.17.1",
    "express-validator": "^6.6.0",
    "jsonwebtoken": "^8.5.1",
    "materialize-css": "^1.0.0-rc.2",
    "mongoose": "^5.9.20",
    "react-transition-group": "^4.4.1"
  },
  "devDependencies": {
    "concurrently": "^5.2.0",
    "nodemon": "^2.0.4"
  }
}

Screenshots of login page in production environment Screenshots of login page in development environment

Answer 1

您的 .form-container 元素的不透明度为 1%，这就是元素不可见的原因。

.form-container {
    background-color: #e7e3e3;
    opacity: 1%;
}

移除opacity: 1%.

将 MERN 应用程序部署到 Heroku 后缺少 React 组件

React components missing after deploying MERN app to Heroku

deployment

heroku

node.js

reactjs

mern