Я загрузил свое приложение в heroku. Он работает локально, но не работает в героку, где он успешно построен - PullRequest
0 голосов
/ 12 сентября 2018

Мое приложение основано на Express JS и React JS. Я вчера обновил свой код заголовка и решил использовать git После этого я не смог получить доступ к своему приложению в https://event -owner.herokuapp.com / Я ищу много вещей в Google, но ничего не найдено. Каждый раз, когда я открываю свой URL, он показывает мне

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

Вот герои логов

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

Пожалуйста, помогите мне. Спасибо

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