Uncaught TypeError: Cannot read property 'length' of undefined

[musa-raza]

My wave HTML element shows up on the page if I inspect elements but it starts of with an initial width of 0px. Even if I change the width of the div, it still remains hidden. Further, if I resize the screen, I get the following error:

Uncaught TypeError: Cannot read property 'length' of undefined

Any thoughts on how to fix this problem and get my waveform showing?

[omerts]

Could you please add code example?

[musa-raza]

import React from 'react';
import { Link } from 'react-router-dom';
import PlayButton from '../play_button';
import Moment from 'react-moment';
import 'moment-timezone';
import ReactLoading from 'react-loading';
import Wavesurfer from 'react-wavesurfer';

class StreamIndexItem extends React.Component {
  constructor(props) {
    super(props);
    this.wavesurfer = null;
    this.state = {
      playing: false,
      pos: 0
    };
    this.handleTogglePlay = this.handleTogglePlay.bind(this);
    this.handlePosChange = this.handlePosChange.bind(this);
  }

  handleTogglePlay() {
    this.setState({
      playing: !this.state.playing
    });
  }

  handlePosChange(e) {
    this.setState({
      pos: e.originalArgs[0]
    });
  }

render() {
  let dateFormat = this.props.song.created_at;
  let delButton;
  let editButton;
  let loader = this.props.loaded;
  if (!loader) {
  return (
    <div className="play-parent">
      <ReactLoading type="bars" color="orange" height='50px' width='50px'  />
    </div>
  );
  } else {
    if (this.props.song != undefined && this.props.currentUser.id === this.props.song.user_id) {
      delButton = <i className="fa fa-trash" aria-hidden="true" 
                     onClick={this.props.deleteSong.bind(this, this.props.song.id)}></i>;
      editButton = <Link to={`/songs/${this.props.song.id}/edit`}>
                     <i className="fa fa-pencil" aria-hidden="true"></i>
                   </Link>;
    }

    return (
      <div className="play-audio-parent">
        <div className="play-parent">
          <div className="artist-info-div">
            <div className="artist-img-div">
              <Link to={`/users/${this.props.song.user_name}`}>
                <img className="play-artist-pic" src={this.props.song.user_avatar_url}></img>
              </Link>
            </div>
            <div className="artist-post-info">
              <Link to={`/users/${this.props.song.user_name}`}>{this.props.song.user_name}</Link>
              <span>posted a track <Moment fromNow>{dateFormat}</Moment>:</span>
            </div>
          </div>
          <div className="artistpost-songart-div">
            <div className="albumart-div">
              <img src={this.props.song.image_url}></img>
              <PlayButton
                id={this.props.song.id}
                name={this.props.song.user_name} title={this.props.song.title}
                songId={this.props.song.id}
                setQueue={this.props.setQueue.bind(this)}
                />
            </div>
          </div>
        </div>
        <div className="delbutton-div">
          {editButton}
          {delButton}
        </div>
        <Wavesurfer
          audioFile={this.props.song.track_url}
          container={`#waveform${this.props.waveformid}`}
          onPosChange={this.handlePosChange}
          playing={this.state.playing}
          onClick={this.handleWaveformClick}
          options={{waveColor: '#8c8c8c',
            progressColor:'#ff7540',
            barWidth: 2,
            height: 80}}
            ref={(Wavesurfer) => {this.wavesurfer = Wavesurfer;}} />
          <div>
          </div>
      </div>);
    }
  }
}

export default StreamIndexItem;

[musa-raza]

I am passing the the song_url to this component from it's parent component

[omerts]

Seems like you are passing undefined for: this.props.song.track_url I am presumming this is unfinished code, but just as a side note, you need to also pass pos to the WaveSurfer component if you want it to be controlled via your state. Also, handleTogglePlay is never used, therefore component will never start playing.

[musa-raza]

Yeah i'm not doing that because I just wanted it to show up on the screen. Would that stop it from showing up on the page at all? I double checked that I am passing it in the audio file, and I am. When I type in this.props.song.track_url and I get the link to the specific url from my cloud storage. I still get the same error?

[omerts]

Is it possible for you to send a live example?

[musa-raza]

I played around with it and somehow it works! You can close the issue!