redux-form Migration to v6 throwing error in getValues.js

Question

I'm attempting to use v6 of redux-form but running into some pretty undescriptive errors. The setup is straight forward, the reducer verbatim from the site:

import { combineReducers } from 'redux'
import { reducer as formReducer } from 'redux-form';

export default combineReducers({
  form: formReducer,
});

Then, I create a straight forward component without any fields (I get the exact same error when I have fields too).

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

class LoginForm extends Component {
  render() {
    const { handleSubmit, pristine, reset, submitting } = this.props;

    return (
      <div>
        Form
      </div>
    );
  }
}

export default reduxForm({
  form: 'login' // a unique name for this form
})(LoginForm);

When I navigate to my component, I get this error:

Uncaught TypeError: Cannot read property 'reduce' of undefined

The error is pointing to redux-form's getValues.js, and specifically this area of the code:

var getValues = function getValues(fields, state) {
  return fields.reduce(function (accumulator, field) {
    getValue(field, state, accumulator);
    return accumulator;
  }, {});
};

One idea came from the very bottom of redux-form's v6 migration page about upgrading react-hot-loader, so I upgraded to 3.X but that didn't work.

Answer 1

You are using v6 syntax but the version in your node_modules/redux-form is v5. That getValues function no longer exists in v6.

rm -rf node_modules/redux-form
npm install --save redux-form