TypeError: Cannot read property 'oneOf' of undefined - Always thrown

[Amertz08]

Regardless of whether or not I hardcode the 'command' prop to the component I get a 'oneOf' property error

import React from 'react';
import Recorder from 'react-recorder';


export default class Recording extends React.Component {

    constructor (props) {
        super(props);
        this.state = {
            command: props.command ? props.command : 'none'
        };
    }

    render () {
        return (
            <div>
                <Recorder command="none" />
            </div>
        )
    }
}

My desire would be for this.state.command to be passed but that also throws the error.

[Amertz08]

I might of fixed this issue. "PropTypes" was moved out of "react" so I basically copied the component into a local file and made changes as needed.

import React from 'react'
import PropTypes from 'prop-types';

class Recorder extends React.Component {

	start () {
		this.mediaRecorder.start()
	}

	stop () {
		this.mediaRecorder.stop()
	}

	pause () {
		this.mediaRecorder.pause()
	}

	resume () {
		this.mediaRecorder.resume()
	}

	componentDidMount () {
		navigator.getUserMedia = (navigator.getUserMedia ||
			navigator.mozGetUserMedia ||
			navigator.msGetUserMedia ||
			navigator.webkitGetUserMedia);

		if (navigator.getUserMedia && window.MediaRecorder) {
			const constraints = {audio: true};
			this.chunks = [];
			const { blobOpts, onStop, onError, mediaOpts, onPause, onResume, onStart, gotStream } = this.props;

			const onErr = err => {
				console.warn(err);
				if (onError) onError(err)
			};

			const onSuccess = stream => {
				this.mediaRecorder = new window.MediaRecorder(stream, mediaOpts || {});

				this.mediaRecorder.ondataavailable = e => {
					this.chunks.push(e.data)
				};

				this.mediaRecorder.onstop = e => {
					const blob = new window.Blob(this.chunks, blobOpts || {type: 'audio/wav'});
					this.chunks = [];
					onStop(blob)
				};

				this.mediaRecorder.onerror = onErr;
				if (onPause) this.mediaRecorder.onpause = onPause;
				if (onResume) this.mediaRecorder.onresume = onResume;
				if (onStart) this.mediaRecorder.onstart = onStart;
				this.stream = stream;
				if (gotStream) gotStream(stream)
			};

			navigator.getUserMedia(constraints, onSuccess, onErr)
		} else {
			console.warn('Audio recording APIs not supported by this browser');
			const { onMissingAPIs } = this.props;
			if (onMissingAPIs) {
				onMissingAPIs(navigator.getUserMedia, window.MediaRecorder)
			} else {
				window.alert('Your browser doesn\'t support native microphone recording. For best results, we recommend using Google Chrome or Mozilla Firefox to use this site.')
			}
		}
	}

	componentDidUpdate (prevProps) {
		if (this.props.command && this.props.command !== 'none' && prevProps.command !== this.props.command) {
			this[this.props.command]()
		}
	}

	componentWillUnmount () {
		if (this.props.onUnmount) this.props.onUnmount(this.stream)
	}

	render () {
		return false
	}
}

Recorder.propTypes = {
	command: PropTypes.oneOf(['start', 'stop', 'pause', 'resume', 'none']),
	onStop: PropTypes.func.isRequired,
	onMissingAPIs: PropTypes.func,
	onError: PropTypes.func,
	onPause: PropTypes.func,
	onStart: PropTypes.func,
	onResume: PropTypes.func,
	onUnmount: PropTypes.func,
	gotStream: PropTypes.func,
	blobOpts: PropTypes.object,
	mediaOpts: PropTypes.object
};

export default Recorder