redux-form: Error is undefined

import React from 'react';
import { Field, reduxForm } from 'redux-form';

const validate = values => {
  const errors = {};

  if (!values.email) {
    errors.email = 'Required';
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
    errors.email = 'Invalid email address';
  }

  if (!values.password) {
    errors.password = 'Required';
  }

  return errors;
}

const renderField = ({
  input,
  type,
  icon,
  placeholder,
  meta: { touched, error }
}) => (
  <div className="field">
    <div className="ui left icon input">
      <i className={[icon, "icon"].join(" ")} />
      <input {...input} placeholder={placeholder} type={type} />
    </div>
    {touched && error && <div className="ui negative message">
      <div className="header">
        {error}
      </div>
    </div>}
  </div>
)

let LoginForm = props => {
  const { handleSubmit, submitting, error } = props;
  
  return (
    <form className="ui form" onSubmit={handleSubmit}>
      <div className="ui stacked segment">

        <Field component="input" type="text" name="email" placeholder="E-mail address" icon="mail" component={renderField} />

        <Field component="input" type="password" name="password" placeholder="Password" icon="user" component={renderField} />

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

        <button type="submit" className="ui fluid large teal submit button" disabled={submitting}>Login</button>
      </div>
    </form>
  );
}

LoginForm = reduxForm({
  // a unique name for the form
  form: 'login',
  validate
})(LoginForm);

export default LoginForm;

You will see that the error in props always return undefined

in my case i figured it out:

• i had dot syntax named field e.g. ‘data.email’

WRONG: { ‘data.email’:‘invalid email’ }

CORRECT (using object notation {‘data’:{‘email’:‘invalid email’}}

which gets correctly delivered to the field

*note perhaps include it in the submission error documentation how to handle dot notation?

same issue here, strangely enough the error is correctly stored in the state reduxstate.form.myform.submitErrors contains the correct field names, but the rendered field component receives field.meta.errors=undefined, but field.meta.submitFailed is True …

I think I may have identified this as a webpack / babel issue. This would explain why reproducing this in a jsfiddle is hard:

Basically, if in your app you do:

import { SubmissionError } from 'redux-form';
...
throw SubmissionError({_error: "Bob"});

The instance of fails here:

_SubmissionError2.default !== the SubmissionError imported to user land! This issue about babel seems to highlight this: https://stackoverflow.com/questions/33870684/why-doesnt-instanceof-work-on-instances-of-error-subclasses-under-babel-node

Hmm @Ethaan I am pretty sure we are returning a promise. Still does not work.

@kylanhurt please provide a working example. Start here: https://jsfiddle.net/gustavohenke/48814zsq/