Unhandled SubmissionError rejection: failed to send confirmation

Question

I am working on enabling server-side validation using the redux form, where when the user submits the SignUp form, if the server responds to the error, the form shows an error ... In this case, the error has status 422 from the server and answers w {"errors":{"email":["has already been taken"]}}

While the form is fined, I cannot get a SubmissionError to display on the form. I get the following error in the JS console:

Unhandled rejection SubmissionError: Submit Validation Failed

What am I doing wrong with reduction-form validation processing? 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 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) ...