我的应用程序基于Express JS和React JS。我昨天更新了标头代码,并提交给git。之后,我无法访问https://event-owner.herokuapp.com/中的应用程序 我在Google中搜索了很多东西,但没有找到任何东西。每次打开网址时,都会向我显示
Application error An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do this from the Heroku CLI with the command
heroku logs --tail
这是heroku日志
2018-09-12T14:24:07.223927+00:00 app[web.1]: at Module.load (module.js:566:32)
2018-09-12T14:24:07.223923+00:00 app[web.1]: at Module._compile (module.js:653:30)
2018-09-12T14:24:07.223925+00:00 app[web.1]: at Object.Module._extensions..js (module.js:664:10)
2018-09-12T14:24:07.284353+00:00 heroku[web.1]: Process exited with status 1
我的应用程序运行正常,但之后我更新了我的头文件以使其无法运行。这是header.js的代码
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { LogoutUser } from '_actions/auth';
import { ClearUser } from '_actions/user';
import configStore from '../../Redux/Store';
class Header extends Component {
state = {
toggle: false
}
componentDidMount() {
}
logout = () => {
this.props.logout();
}
toggleDrayer = (e) => {
this.setState({
toggle: !this.state.toggle
})
}
render() {
return (
<div id="main_drayer" className="drayer_overlay">
<div className="container mt-2 toggle">
<button onClick={this.toggleDrayer} className="toggle_btn"><i className="fa fa-bars fa-2x"></i></button>
</div>
<header className={this.state.toggle ? `show_drayer` : `hide_drayer`}>
<div id="top-header">
<div className="container">
<div className="row">
<div className="col-md-12 col-xs-12 has_drayer">
<ul className="top-left-menu">
<li><Link to="/faq">FAQ</Link></li>
<li><Link to="/contact">Contact Us</Link></li>
</ul>
<ul className="top-right-menu">
<li><Link to="/events" className="event-button">Latest Event</Link></li>
{this.props.isAuthenticated ? <li><Link to="/profile">My Profile</Link></li> : <li><Link to="/register">Register</Link></li>}
{this.props.isAuthenticated ? <li><Link to="#" onClick={this.logout}>Logout</Link></li> : <li><Link to="/login">Login</Link></li>}
</ul>
</div>
</div>
</div>
</div>
<div id="bottom-header">
<div className="container">
<div className="row">
<div className="col-md-12 d-flex flex-justify-content-between flex-align-center">
{/* <img src="/img/logo.png" alt="logo" /> */}
<button
id="drayer_close_btn"
onClick={(e) => {
this.setState({
toggle: false
})
}}
>Close</button>
<div className="logo">
<Link to="/"><h1>Gift</h1></Link>
</div>
<ul className="top-right-menu">
<li><Link to="/events/create" className="btn btn-pri">Create An Event</Link></li>
{!this.props.isAuthenticated && <li><Link to="/login" className="btn btn-pri">Affiliate Login</Link></li>}
</ul>
</div>
</div>
</div>
</div>
</header>
</div>
)
}
}
const mapStateToProps = (state) => ({
isAuthenticated: !!state.auth.token
})
const mapDispatchToProps = (dispatch) => ({
logout: () => dispatch(LogoutUser())
})
export default connect(mapStateToProps, mapDispatchToProps)(Header);
我还更新了样式文件style.scss
这是文件下的代码
@media only screen and (max-width: 480px) {
header {
position: fixed;
left: 0px;
top: 0px;
background: #19283f;
z-index: 9999999;
width: 200px;
height: 100%;
padding-top: 10px;
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
overflow-y: scroll;
max-width: 0px;
}
header.show_drayer{
max-width: 200px;
box-shadow: 5px 0px 25px 3px #00000099;
animation: slideRight;
animation-duration: 0.3s;
}
header.hide_drayer{
animation: slideLeft;
animation-duration: 0.3s;
}
@keyframes slideRight {
from{ max-width: 0px }
to {max-width: 200px}
}
@keyframes slideLeft{
from{ max-width: 200px }
to {max-width: 0px }
}
.has_drayer ul{
float: left;
width: 100%;
}
.has_drayer ul li{
display: block;
margin-left: 0px !important;
}
.top-right-menu li{
display: block;
margin-left: 0px !important;
}
#bottom-header{
background-color: transparent !important;
}
#bottom-header .d-flex{
flex-direction: column;
justify-content: flex-start;
align-items:flex-start;
}
#bottom-header ul.top-right-menu li a{
box-shadow: none;
padding: 0px;
}
#main_drayer .toggle{
display: block;
}
#main_drayer .toggle_btn{
padding: 5px 7px;
border-radius: 5px;
border: 1px solid #ddd;
background: $pri;
color: #fff;
outline: 0px none;
}
#main_drayer #drayer_close_btn{
display: block;
padding: 5px 10px;
background: #f01;
color: #fff;
position: absolute;
right: 10px;
top: 0px;
border-radius: 5px;
border: 0px none;
outline: 0px none;
box-shadow: inset 1px -1px 2px 2px #212121;
}
}
请帮助我。谢谢