v6.5.0 SubmissionError in onSubmit Function is Not Passing Along field errors / _error, giving "Uncaught (in promise)" Error in Console

So, along with Redux-Form I am using axios and thunk as middleware, and when I am in the onSubmit function (loginUser), and do AJAX calls with Axios. Unfortunately, when I want to signal that my user’s submitted credentials are invalid and throw a SubmissionError to signal that the onSubmit function failed, and therefore get the errors displayed on the form I am getting “Uncaught (in promise)”.

I have read from other threads that I might have to return a promise at some point, but I’m not entirely sure how to implement that (if that is even the problem).

Currently using version 6.5.0. Any help would be appreciated.

import axios from 'axios';  
import { SubmissionError } from 'redux-form';

export function loginUser({ email, password }) {  
  return function(dispatch) {
      axios.post(`${API_URL}/authenticate`, { email, password })
      .then(response => {
        console.log('status is: ', status, ' response is: ', response);
        if(response.data.token){
          cookie.save('token', response.data.token, { path: '/' });
          dispatch({ type: AUTH_USER });
          browserHistory.push('/');
        } else {
          if(response.data.success === false) {
            var errObj = { email: "Invalid email and password combo", _error: "That email and password combination did not work. Please try again."};
            throw (errObj)
          }
        }
      })
      .catch((error) => {
        throw(new SubmissionError(error));
      })
    }
  }

Error in console:

Uncaught (in promise) >
SubmissionError
errors
:
Object
message
:
"Submit Validation Failed"
name
:
"SubmissionError"
stack
:
"SubmissionError: Submit Validation Failed↵    at eval (eval at <anonymous> (http://localhost:8080/bundle.js:14:22671), <anonymous>:94:1297)"
__proto__
:
ExtendableError

And interestingly enough if I change the last line to “reject(new SubmissionError(error))”, then the form’s state “submitFailed” gets set to true, but it doesn’t tell me anything about the actual errors (ie they are not defined anywhere in the state, like they should be so they can be sent to the component as feedback to the user).

[houfeng0923]

<Form onSubmit={handleSubmit(this.handleSubmit)}>

make sure you this.handleSubmit return promise .

[kylanhurt]

FYI I apparently fixed with the following code (specifically note the reject() parts):

export function registerUser({ email, password }) {  
  return new Promise((resolve, reject) => {
    axios.post('http://localhost:8088/api/users', { email: email, password: password })
    .then(response => {
      console.log('response is: ' , response, 'response.data is: ', response.data, 'response.code is: ', response.code);
      if(response.data.success){
        console.log('registerUser response.data.success is true')
        cookie.save('token', response.data.token, { path: '/' });
        store.dispatch({ type: AUTH_USER });
        browserHistory.push('/');
        resolve();
      } else {
        if(response.data.code === 11000){ //duplicate email
          console.log('data code = 11000')
          var errObj = new SubmissionError({_error: 'User registration failed, email already exists.' }) //need to add store dispatch for failed user registration (for form feedback)
          reject(errObj);
        } else if (response.code === 2) {
          console.log('response.code = 2')
          var errObj = new SubmissionError({ email: 'Invalid email pattern.' })
          reject(errObj);
        }
      }
    }).catch((error) => {
      console.log('error is: ', error)
      //errorHandler(store.dispatch, error, AUTH_ERROR)      
      if(error instanceof SubmissionError) reject(error);

    });
  })
}