Why is Heroku not showing one of my pages? (The page works if I load it on localhost)

Question

There is one page on my Heroku hosted ReactJS app that isn't rendering anything, yet all the other pages are working. The page works on my localhost, so it's confusing. I've tried: re-deploying the app, calling an extra fetch upon this specific page loading, comparing and contrasting the return/render methods of similar pages, looking at the console for errors (there is one, albeit confusing. I'll post a screenshot below), watching the Heroku log on my backend to make sure proper authorization and data loading is happening (it is), and researching the console error both in the React documentation as well as google.

Here's what the page is supposed to look like (taken from my localhost):

The page on my localhost

Here's what it looks like on Heroku:

The page on Heroku

Here's the error I'm getting in the console on page load in Heroku (other pages aren't giving this error):

Console error on Heroku

Here's the description of the error message in the React documentation when I click on their link provided in the console (Again, I've compared and contrasted the return/render methods in this page vs similar pages and it's basically the same. I've also researched this error here and elsewhere and my rendering/return method is correct):

Error in React documentation

Here is my code in the file of which the page isn't rendering:

import TeamCard from "../components/TeamCard";
import NewTeamForm from "../components/forms/NewTeamForm";
import { Route, NavLink } from "react-router-dom";
import Jumbotron from "react-bootstrap/Jumbotron";
import { Paper, Grid, Typography } from "@material-ui/core";
import Alert from "@material-ui/lab/Alert";

class TeamsContainer extends Component {
  state = {
    successAlertShowing: false,
  };

  showSuccessAlert = () => {
    this.setState({
      ...this.state,
      successAlertShowing: true,
    });
  };

  render() {
    return (
      // this.state.successAlertShowing ?
      // (<Alert severity="error">This is an error alert — check it out!</Alert>) : (null),
      <div className="text-center" style={{ paddingRight: 100 }}>
        <Jumbotron>
          <Typography gutterBottom variant="h2" component="h4">
            Your Teams
          </Typography>
        </Jumbotron>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "4fr 4fr 4fr",
            gridGap: 10,
          }}
        >
          {this.props.teams.map((team) => {
            return (
              <TeamCard
                key={team.id}
                teamInfo={team}
                userId={this.props.userId}
                deleteTeam={this.props.deleteTeam}
              />
            );
          })}

          <Grid container spacing={1}>
            <Grid container item xs={12} spacing={3}>
              <NavLink to="/teams/create-team" exact>
                <Paper
                  elevation={3}
                  style={{ borderRadius: "50%", margin: 50, marginTop: 75 }}
                >
                  <img
                    style={{ maxWidth: 200, maxHeight: 225, borderRadius: 100 }}
                    src="https://cdn2.iconfinder.com/data/icons/everything-but-the-kitchen-sink-2/100/common-06-512.png"
                    alt="Plus Sign"
                    data-toggle="modal"
                    data-target="#exampleModal"
                  />
                </Paper>
              </NavLink>
            </Grid>
          </Grid>
        </div>

        <div
          class="modal fade"
          id="exampleModal"
          tabindex="-1"
          role="dialog"
          aria-labelledby="exampleModalLabel"
          aria-hidden="true"
        >
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">
                  New Team
                </h5>
                <button
                  type="button"
                  class="close"
                  id="close-button"
                  data-dismiss="modal"
                  aria-label="Close"
                >
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <Route
                  path="/teams/create-team"
                  render={(props) => (
                    <NewTeamForm
                      {...props}
                      userId={this.props.userId}
                      addTeam={this.props.addTeam}
                      showSuccessAlert={this.showSuccessAlert}
                    />
                  )}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default TeamsContainer;

Here is where it's called in App.js:

            <Route
              path="/teams"
              render={(props) => (
                <TeamsContainer
                  {...props}
                  userId={this.state.auth.user.id}
                  teams={this.state.teams}
                  addTeam={this.addTeam}
                  deleteTeam={this.deleteTeam}
                />
              )}
            />

Any idea what could be causing this page to load on localhost but not on Heroku?

Thank you in advance:)

Answer 1

I figured it out. The problem was that I was starting the return statement with a comment. For some reason Heroku didn't like that so it wasn't rendering the page. I moved the comments to the bottom of the file and it works now.