Unhandled rejection SubmissionError: Submit Validation Failed

Question

I'm working to enable server-side validation with redux-form, where when a user submits the SignUp form, if the server responds with an error, the form shows the error... In this case the error has a status of 422 from the server and is responding w {"errors":{"email":["has already been taken"]}}

While the form is submitting fine, I can't get the SubmissionError to display on the form. I'm getting the following error in the JS console:

Unhandled rejection SubmissionError: Submit Validation Failed

What am I doing wrong with redux-form submit validation handling? Thanks

SignUpForm

const ensureValid = response => {
  if (response.status === 422) {
    return response.json().then(({errors}) => {
      throw new SubmissionError({
        email: 'Already in Use',
        _error: 'failed!',
      });

    });
  }
  return response;
};

class SignUp extends React.Component {

  handleSubmit(data) {
    const request = new Request('http://localhost:4400/auth/', {
     method: 'POST',
     headers: new Headers({
       'Accept'       : 'application/json',
       'Content-Type' : 'application/json',
     }),
     body: JSON.stringify({ user: data })
    });

    fetch(request).then(ensureValid).then(response => {
      return tryLogin(response, this.props.dispatch);
    });


   }

  render() {
    const { error, handleSubmit, pristine, reset, submitting } = this.props;
    return (
      <div className="container">
        <div className="row justify-content-md-center">
          <div className="col-6">

            <h1>Sign Up - it's free.</h1>

            <form onSubmit={this.props.handleSubmit(this.handleSubmit.bind(this))}>

              <Field
                name="first_name"
                type="text"
                component={renderField}
                label="First Name"
              />

              <Field
                name="last_name"
                type="text"
                component={renderField}
                label="Last Name"
              />

              <Field
                name="email"
                type="text"
                component={renderField}
                label="Email"
              />

              <Field
                name="password"
                type="password"
                component={renderField}
                label="Password"
              />

              <button type="submit" disabled={submitting}>Submit</button>

              {error && <strong>{error}</strong>}
            </form>

          </div>
        </div>
      </div>
    );
  }
}

// Decorate the form component
SignUp = reduxForm({
  form: 'SignUp' // a unique name for this form
})(SignUp);

const mapStateToProps = state => {
  return {
  };
};

const mapDispatchToProps = (dispatch) => bindActionCreators({
  dispatch
}, dispatch)

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

Answer 1

Turns out I needed to update:

BEFORE:

fetch(request)...

AFTER:

return fetch(request) ...