Expected a string (for built-in components) or a class/function (for composite components) but got: undefined

bellancaf — Thu, 11 Jul 2019 22:48:26 +0000

Hellow Everyone!

I am experiencing a small (big) annoying issue :D

The system on our marketplace is not able to fetch certain products but successfully manages to get others.

-> https://www.feralhorses.co.uk/artworks/i-belong-to-you (works)
-> https://www.feralhorses.co.uk/artworks/parallel-expressions (doesn't work)

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as authActions from '../actions/authActions';
import * as lotActions from '../actions/lotActions';
import { requestCurrentLot } from '../utils/crudHelpers';
import { logActions, createLog } from '../utils/logHelpers';
import { checkToken } from '../utils/authHelpers';
import SingleArtworkPrimary from './SingleArtworkPrimary';
import SingleArtworkSecondary from './SingleArtworkSecondary';
import {
  requestArtworkByName,
  requestSingleArtworkGeneral,
  requestArtworks
} from '../utils/crudHelpers';

class SingleArtworkContainer extends Component {
  constructor(props) {
    super(props);

    this.getSingleArtwork = this.getSingleArtwork.bind(this);    
    this.requestArtistPrimaryArtworks = this.requestArtistPrimaryArtworks.bind(this);
    this.readUrl = this.readUrl.bind(this);

    this.state = {
      singleArtwork: null,
      artistArtworks: []      
    };
  }

  componentDidMount() {
    if (checkToken()) {
      document.body.classList.add('is-auth');
    }
    this.getSingleArtwork(this.readUrl());  
  }

  readUrl() {
    const browserPath = window.location.pathname;
    return browserPath.split('/')[2];
  }

  getSingleArtwork(artworkTitle) {
    requestSingleArtworkGeneral(artworkTitle)
      .then((response) => {
        if(response.data.result){
          const { artwork } = response.data;
          if (artwork.status === 2) {
            this.requestArtistPrimaryArtworks(artwork.primary_lot_id, artwork.artist.pretty_url);
          }
          this.setState({
            singleArtwork: artwork
          });
          if(checkToken()) {
            createLog(logActions.primaryMarketArtwork, `Artwork: ${artwork.artwork_id}-${artwork.artwork_title} by ${artwork.artist_name}`);
          }
        } else {
          authActions.forwardUserTo('/not-found');
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }

  requestArtistPrimaryArtworks(lot_id, prettyUrl) {
    requestArtworks(1, lot_id, 3, {artist_pretty_url: prettyUrl})
      .then((response) => {
        response.data.primary_lot_artworks.map((artwork, key) => {
          this.state.artistArtworks.push(artwork);
        });
        this.setState({
          isLoading: false          
        });
      })
      .catch((err) => {
        console.log(err);
      });
  }

  render() {
    if(this.state.singleArtwork === null) {
      return (
        <div style={{ minHeight: '95vh' }}>
          <h3>Loading</h3>
        </div>
      );
    } else if (this.state.singleArtwork.status === 2) {
      return (
        <div>
          <SingleArtworkPrimary
            artwork={this.state.singleArtwork}
            artistArtworks={this.state.artistArtworks}
            />
        </div>
      );
    } else {
      return (
        <div>
          <SingleArtworkSecondary 
            artwork={this.state.singleArtwork}
            />
        </div>
      );
    }
  }
}

const mapStateToProps = (state, ownProps) => ({
  lot: state.lots.lot
});

const mapDispatchToProps = (dispatch) => ({
  actions: {
    lotActions: bindActionCreators(lotActions, dispatch)
  }
});

SingleArtworkContainer.propTypes = {
  artwork: PropTypes.object,
  from: PropTypes.string,
  lot: PropTypes.object
};

export default connect(mapStateToProps, mapDispatchToProps)(SingleArtworkContainer);

My first catch error is what consoles it out

What is the expected behavior?
Given that this is exactly the same code I am honestly surprised by the fact that I get a React error as the code behind the two pages is literally the same :(

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
All browsers
React 15.3.0 (but also happens in our UAT machine with react 16.8)

DEV Community: bellancaf

Expected a string (for built-in components) or a class/function (for composite components) but got: undefined