React/Redux Variable returning HTML in production

Viewed 338

I'm currently working on a React webapp, and when I build and serve the application, a variable that I use to store a schedule is instead being filled with the page's HTML?

The app works perfectly in development, but has issues in production.

The variable is fetched using a Redux action where it queries my database.


Component:

import React, { Component, useEffect, useState, Fragment } from 'react';
import Game from './Game';

//Redux
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { getSchedule } from '../actions/schedule';

const Schedule = ({ scheduleObj:{schedule, loading}, getSchedule }) => {
  useEffect(() => {
    getSchedule('all');
  }, [loading]);

  const [type, setType] = useState(0);

  const onChange = e => {
    getSchedule(e.target.value);
  };

  if (loading) {
    return <div>Schedule Loading</div>;
  } else {
    return (
      <Fragment>
        <p>Schedule</p>

        <select id='schedule' onChange={e => onChange(e)}>
          <option value='all'>All Sports</option>
          <option value='fav'>Favourite Sports</option>
          <option value='mbasketball'>Axemen Basketball</option>
          <option value='mfootball'>Axemen Football</option>
          <option value='mhockey'>Axemen Hockey</option>
          <option value='msoccer'>Axemen Soccer</option>
          <option value='mswimming'>Axemen Swimming</option>
          <option value='wbasketball'>Axewomen Basketball</option>
          <option value='wcrosscountry'>Axewomen Cross Country</option>
          <option value='wrugby'>Axewomen Rugby</option>
          <option value='wsoccer'>Axewomen Soccer</option>
          <option value='wswimming'>Axewomen Swimming</option>
          <option value='wvolleyball'>Axewomen Volleyball</option>
        </select>
        {schedule}

      </Fragment>
      /*
      (schedule.length <1000) ? (schedule.map(game => (
          <Game key={game._id} gameID={game._id}/>
        ))) : 'Empty Schedule'
      */
    );
  }
};
Schedule.propTypes = {
  getSchedule: PropTypes.func.isRequired,
  scheduleObj: PropTypes.object.isRequired,
  loading: PropTypes.bool
};

const mapStateToProps = state => ({
  scheduleObj: state.schedule,
  loading: state.loading
});

export default connect(mapStateToProps, { getSchedule })(Schedule);


The variable that is getting filled with the HTML is the schedule variable.

Example (Just drawing the contents of schedule as text):

Error


Here's what the page should look like

enter image description here


The schedule variable should contain a JSON array of objects. Here is what it looks like console.log() 'd to in development.JSON example


Network Tab with Response (Production): Network Tab


Response

1 Answers

Found what the issue likely is. We run our backend requests via a proxy as defined in the package.json file, however this isn't a feature used in production environments.

Will update with the fix when found.

Update: This was the issue. Deploying the app to Heroku works fine!

Related