redux-form: throw new SubmissionError() causing Uncaught (in promise) error.

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} />

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.

@JensenTStava In your mapDispatchToProps you should have this format:

const mapDispatchToProps = function(dispatch) {
  return {
    signupUser: (formData) => {
      return dispatch(signupUser(formData)); // Notice the return
    }
  };
};

Just updated to webpack 2, and started encountering this bug.

In my case, the issue is not from redux-form but webpack 2 and / or babel.

My code breaks if I imported SubmissionError like this:

import { SubmissionError } from 'redux-form';

// somewhere in promise chain:
throw  new SubmissionError({errors});

But works if I import it like this:

import SubmissionError from 'redux-form/lib/SubmissionError'

I was able to figure out this line does error instanceof SubmissionError and returning false.

It lead me to believe somehow webpack 2 is generated two copies SubmissionErrors…

Update:

Created a simple demonstration for this:

https://github.com/aq1018/webpack2-redux-form-submission-error-weirdness

I was stuck for one day with similar Error. I was returning all promises in Project and I still couldn’t figure it out. Then I ran into this https://stackoverflow.com/questions/38481857/getting-cannot-call-a-class-as-a-function-in-my-react-project

I was using react router 4 like this: <Route exact path="/events/checkout/:id/" render={(props) => <CheckoutContainer {...props} />} />} />

then I change it into this: <Route exact path="/events/checkout/:id/" component={(props) => <CheckoutContainer {...props} />} />} />

So, I just changed render to component and It is working! Problem is that render most likely treat all components as functional.

For me this issue was caused by not adding a return declaration before my ajax call. So instead of axios.post(URL, payload) I had to make sure return axios.post(URL, payload) was used. The throw new SubmissionError(…) call was in the .catch( error => … block of the axios call.

@JensenTStava I was under the impression that ‘mapsDispatchToProps’ was only for version 5 and older.

I would love to see a solution to this issue because I am having a similar problem as the OP.

@francosioquim your solution was it. The handleSubmit function that redux-form defines probably look (conceptually) something like this:

function handleSubmit(event) {
   const formValues = getFormValues(event);
   userDefinedSubmit(formValues).catch(
      submissionError => putErrorsInFormState(submissionError)
   )
}

I’m abstracting away a lot, but the idea is that handleSubmit function will only work if the userDefinedSubmit function returns a thenable. Thank you!