将MERN应用程序部署到Heroku后，对丢失的组件作出反应

Question

我在Heroku上部署了一个MERN应用程序（使用MongoDB Atlas作为数据库），主页没有呈现登录或注册表单。 我检查了Heroku日志中的任何错误，没有错误。 另外，当我检查元素时，我看到元素在那里，但是React组件没有呈现。 只呈现CSS背景图像。 我的heroku-postbuild脚本有什么问题吗？ 谢谢。请在此处输入图像说明

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

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"
  }
}

生产环境下登录页面截图开发环境下登录页面截图

Answer 1

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

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

移除不透明度:1%。