Element type is invalid (got: undefined) for react-redux component

Question

I'm trying to create a component for redux-form. Here is my component

import React, { PropTypes } from 'react'
import Input from 'react-toolbox'

export const TextField = ({ input, meta: { touched, error }, ...custom }) => (
  <Input
    error={touched && error}
    {...input}
    {...custom}
  />
)

TextField.propTypes = {
  input: PropTypes.object,
  meta: PropTypes.object
}

export default TextField

I also create an index.js file to easily import it

import TextField from './TextField'   
export default TextField

Then I use it like this

import TextField from 'components/TextField'
import { Field } from 'redux-form'
<form onSubmit={props.handleSubmit(props.loginUser)}>
  <Field type='email' label='Email' name='email' component={TextField} required />
</form>

But I get this error

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of TextField.

I check again an again

• the redux form doc
• other related topic on SO like this one or this one

Answer 1

Try to change:

import Input from 'react-toolbox'

to:

import Input from 'react-toolbox/lib/input';

or

import {Input} from 'react-toolbox';

Both should work

I think that in your case Input is undefined imported like that