Error: fields must be passed when initializing state, How so? - reactjs

Question

Getting this error but I can't really find an issue with my code. The error points towards the ReactDOM.render line of code. but I can't find the issue.
Re-factored my code to no avail. I went through other variable declarations and everything in my code but I can't seem to find anything that'd make the error go away!
import React from 'react';
import { Field,reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import { createStream } from '../../actions/index';
class StreamCreate extends React.Component {
renderError=({error,touched})=>{
if(touched && error){
return (
<div className="ui error message">
<div className="header">{error}</div>
</div>
);
}
}
renderInput=({ input,label,meta })=>{
const className=`field ${meta.error && meta.touched ? 'error':''}`;
return (<div className={className}>
<label>{label}</label>
<input {...input} autoComplete="off"/>
{this.renderError(meta)}
</div>
);
}
onSubmit=(formValues)=>{
this.props.createStream(formValues);
};
//redux-form changes it all!
render(){
return (
<form onSubmit={this.props.handleSubmit(this.onSubmit)} className="ui form error">
<Field name="title" component={this.renderInput} label="Enter Title"/>
<Field name="description" component={this.renderInput} label="Enter Description"/>
<button className="ui button primary">Submit</button>
</form>
);
}
}
const validate=(formValues)=>{
const errors={};
if(!formValues.title){
errors.title ='You must enter a title'
}
if(!formValues.description){
errors.description='you must enter a description'
}
return errors;
};
const formWrapped = reduxForm({
form: 'streamCreate',
validate: validate
})(StreamCreate);
export default connect(null,{ createStream })(formWrapped);
//My app.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import reduxThunk from 'redux-thunk';
import App from './components/App';
import reducers from './reducers/index';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducers,composeEnhancers(applyMiddleware(reduxThunk)));
ReactDOM.render(<Provider store={store}><App/></Provider>,document.querySelector('#root'));
//reducers index.js
import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import authReducer from './authReducer';
export default combineReducers({
auth: authReducer,
form: formReducer
});
//authreducer.js
import { SIGN_IN,SIGN_OUT} from '../actions/types';
const INITIAL_STATE={
isSignedIn: null,
userId: null
};
export default(state=INITIAL_STATE,action) =>{
switch(action.type){
case SIGN_IN:
return {...state,isSignedIn: true, userId: action.payload };
case SIGN_OUT:
return {...state,isSignedIn: false, userId: null };
default:
return state;
}
};
No error and to be able to view the page

Answer 1

Update Your Redux-form to Version 8.1.Because Your Code is according to Version 8.1. Redux-form is reWritten Totally in Version 6.1 .Here is the Link to Version 8.1 Guide.
v5 → v6 Migration Guide

Answer 2

npm i -S redux-form#8.1
or if you use yarn
yarn add redux-form#8.1
Why?
By mistake latest tag in redux-form points to 5.4.0.
$ yarn -s info redux-form dist-tags
{ latest:
'5.4.0',
rc:
'8.0.0-0',
old:
'5.3.6',
alpha:
'7.0.0-alpha.9' }
The issue is tracked here: https://github.com/erikras/redux-form/issues/4405