TypeError: Cannot read property '0' of undefined resolveModel react-redux-form

[KO527]

The Problem

The error I'm getting through babel is:

Cannot read property '0' of undefined;
resolveModel
node_modules/react-redux-form/lib/utils/resolve-model.js:32

Steps to Reproduce

Inside of src/components/SoundCloudExp.jsx

import React, { Component } from 'react';
import {querySC} from './actions/index';
import { connect } from 'react-redux';
import { Form, Control, actions, Errors } from 'react-redux-form';

class SoundCloudExp extends Component {

    handleSubmit(query){

        const {querySC, dispatch} = this.props;

        let SCPromise = fetch('/', {
            method: 'post',
            body: query
        })
        .then((res) => res.json())
        .then((res) => {
            querySC(res);
        });

        dispatch(actions.submit('SoundCloud', SCPromise));
    }

    render(){

        return (
            <Form id="SC-search" model="SoundCloud" onSubmit={(query) => this.handleSubmit(query)}>
                <div className='search-bar'>
                    <Control.text model=".input"
                                  className='search'
                                  placeholder='Search'/>
                    <Errors model=".input"
                            messages={{NoSearchResults: 'This query returned no results.'}}/>
                </div>
                <Control.button className='search-btn'>
                    Search
                </Control.button>
            </Form>
        )
    }
}

export default connect(null, {querySC})(SoundCloudExp);

Inside of src/index.js

import { combineReducers } from 'redux';
import { createForms, formReducer } from 'react-redux-form';
import { routerReducer } from 'react-router-redux';

const SoundCloudState = {
    input: ''
}

const reducer = combineReducers({
    ...createForms({
        SoundCloud: SoundCloudState
    }), 
    routing: routerReducer,
    form: formReducer
});

export default reducer;

Expected Behavior

For the jsx to produce a regular form with the constructed models.

Actual Behavior

In the
node_modules/react-redux-form/lib/utils/resolve-model.js file,

function resolveModel(model, parentModel) {
  if (parentModel) {
    console.log('parentModel :', parentModel, 'childModel :', model);
    if (model[0] === '.' || model[0] === '[') {  <------------------ It points to this line over here.
      return '' + parentModel + model;
    }

    if (typeof model === 'function') {
      return function (state) {
        return model(state, parentModel);
      };
    }
  }

  return model;
}

function wrapWithModelResolver(WrappedComponent) {
  var ResolvedModelWrapper = function (_PureComponent) {
    _inherits(ResolvedModelWrapper, _PureComponent);

    function ResolvedModelWrapper() {
      _classCallCheck(this, ResolvedModelWrapper);

      return _possibleConstructorReturn(this, (ResolvedModelWrapper.__proto__ || Object.getPrototypeOf(ResolvedModelWrapper)).apply(this, arguments));
    }

    _createClass(ResolvedModelWrapper, [{
      key: 'render',
      value: function render() {
        var _context = this.context,
            parentModel = _context.model,
            localStore = _context.localStore;

        
        var resolvedModel = resolveModel(this.props.model, parentModel); <------------------------ resolveModel gets called here.

        return _react2.default.createElement(WrappedComponent, _extends({}, this.props, {
          model: resolvedModel,
          store: localStore || undefined
        }));
      }
    }]);

    return ResolvedModelWrapper;
  }(_react.PureComponent);

  ResolvedModelWrapper.displayName = 'Modeled(' + WrappedComponent.displayName + ')';

  process.env.NODE_ENV !== "production" ? ResolvedModelWrapper.propTypes = {
    model: _propTypes2.default.any
  } : void 0;

  ResolvedModelWrapper.contextTypes = {
    model: _propTypes2.default.any,
    localStore: _propTypes2.default.shape({
      subscribe: _propTypes2.default.func,
      dispatch: _propTypes2.default.func,
      getState: _propTypes2.default.func
    })
  };

  return ResolvedModelWrapper;
}

What is peculiar is that when I include console.log statements inside of the resolveModel.js file, I get three different variations of the expected response. Why is that?

Reproducible Code Example

(please fork from this CodePen template or this CodeSandbox template)

[KO527]

So basically I had to set a proper trigger for the NoSearchResults error, so I set that up in a sibling folder called services in a file called checkQueryValidity.js:

export default function checkQueryValidty(val){
	return async (dispatch) => {
		dispatch(actions.setPending('SoundCloud.input', true));

			try {
				let response = await querySC(val);
				dispatch(actions.setValidity('SoundCloud.input', {
					queries: response.queries
				}));
			}
			catch(error){
				dispatch(actions.setErrors('SoundCloud.input', {
					NoSearchResults: error.message
				}));
			}

		dispatch(actions.setPending('SoundCloud.input', false));
	}
}

And in the file SoundCloudExp.jsx, I replaced SCPromise w/ checkQueryValidity(res) and replaced querySC(res); with dispatch(actions.submit('SoundCloud', checkQueryValidty(res)));

[Shivamsoni1737]

I'm also facing the same issue, please anyone resolve it. 👏👏