throw new SubmissionError() causing Uncaught (in promise) error.

Hello! I am using Redux Thunk and React Form to do submission validations against my signup form. I want the errors returned by my API endpoint to appear inline in my form. Hence why I need SubmissionError. Everything works great without throwing a new submission error, the form does exactly what I need it to do. The problem is, when I put in the single line to throw new SubmissionError() I get the following error:

Here is my Action creator (using Redux Thunk):

import axios from 'axios';
import { browserHistory } from 'react-router';
import { CTAButtonUnload } from '../../buttons/CTAButton/CTAButtonUnload'
import { SubmissionError } from 'redux-form'

const ROOT_URL = 'XXXXXXXXXXXXXX';

export const signupUser = (formData) => {
    return function(dispatch) {
        axios.post(ROOT_URL + '/v1/user', {
                firstName: formData.firstName,
                lastName: formData.lastName,
                email: formData.email,
                password: formData.password
            })
            .then(response => {
                dispatch({
                    type: 'CTAButtonUnload',
                    payload: {
                        hover: false,
                        click: false,
                        loading: false
                    }
                })
                browserHistory.push('/signup/workspace');
            })
            .catch(response => {
                if(response.response.data.code == 403){
                    throw new SubmissionError({email: null, _error: response.response.data.description})
                }
                dispatch({
                    type: 'CTAButtonUnload',
                    payload: {
                        hover: false,
                        click: false,
                        loading: false
                    }
                })
            });
    }
}

Could this error be caused by a promise inside of SubmissionError()? I saw that others have had similar problems with this error, but they look to be using the Async validation option, I am not, so I am wondering if I am doing something wrong or if this is something with reduxForm?

[sioquim]

I encountered a similar problem and managed to fix this by adding a return on the submit handler.

from

handleSignup = (data) => {
        this.props.actions.signup(data).then((result) => {
            ...
        }).catch((error) => {
            if (error.data.status === 'XXXXXX') {
                throw new SubmissionError({
                    email: 'This email is already registered'
                })
            }
        })
    }

to

handleSignup = (data) => {
        return this.props.actions.signup(data).then((result) => {
            ...
        }).catch((error) => {
            if (error.data.status === 'XXXXXX') {
                throw new SubmissionError({
                    email: 'This email is already registered'
                })
            }
        })
    }

I’m calling handleSignup() from my redux form component:

<SignupForm onSubmit={this.handleSignup} />

[aq1018]

I had some progress on this one. As it turned out, I was using redux-form/immutable all over my code, except when importing SubmissionForm, I did:

import { SubmissionForm } from 'redux-form';

But if you are using redux-form/immutable, you need to use:

import { SubmissionForm } from 'redux-form/immutable';

Apparently they are two different classes.