Adding helpful invariant error messages for form existence.

Author: davidkpiano

src/actions/field-actions.js

@@ -13,6 +13,7 @@ import getFieldFromState from '../utils/get-field-from-state';
 import NULL_ACTION from '../constants/null-action';
 import omit from '../utils/omit';
 import isNative from '../utils/is-native';
+import invariant from 'invariant';
 
 const defaultStrategies = {
   get: _get,
@@ -176,6 +177,11 @@ function createFieldActions(s = defaultStrategies) {
       if (options.validate) {
         const form = s.getForm(getState(), model);
 
+        invariant(form,
+          'Unable to submit form with validation. ' +
+          'Could not find form for "%s" in the store.',
+          model);
+
         if (!form.$form.valid) {
           return dispatch(NULL_ACTION);
         }

src/components/errors-component.js

@@ -5,7 +5,6 @@ import map from '../utils/map';
 import iteratee from '../utils/iteratee';
 import isPlainObject from 'lodash/isPlainObject';
 import omit from '../utils/omit';
-import invariant from 'invariant';
 
 import getForm from '../utils/get-form';
 import getFieldFromState from '../utils/get-field-from-state';
@@ -14,6 +13,7 @@ import isValid from '../form/is-valid';
 import resolveModel from '../utils/resolve-model';
 import initialFieldState from '../constants/initial-field-state';
 import shallowEqual from '../utils/shallow-equal';
+import invariant from 'invariant';
 
 const defaultStrategy = {
   get: _get,
@@ -184,8 +184,10 @@ function createErrorsClass(s = defaultStrategy) {
     const modelString = getModel(model, state);
 
     const form = s.getForm(state, modelString);
-    invariant(form, `Could not find form state for '${modelString}' model. `
-      + 'Please make sure it exists in the store.');
+    invariant(form,
+      'Unable to retrieve errors. ' +
+      'Could not find form for "%s" in the store.',
+      modelString);
 
     const formValue = form.$form;
     const fieldValue = s.getFieldFromState(state, modelString)

src/components/form-component.js

@@ -16,6 +16,7 @@ import getField from '../utils/get-field';
 import { fieldsValid } from '../form/is-valid';
 import deepCompareChildren from '../utils/deep-compare-children';
 import containsEvent from '../utils/contains-event';
+import invariant from 'invariant';
 
 const propTypes = {
   component: PropTypes.any,
@@ -373,11 +374,17 @@ function createFormClass(s = defaultStrategy) {
 
   function mapStateToProps(state, { model }) {
     const modelString = getModel(model, state);
+    const form = s.getForm(state, modelString);
+
+    invariant(form,
+      'Unable to create Form component. ' +
+      'Could not find form for "%s" in the store.',
+      modelString);
 
     return {
       model: modelString,
       modelValue: s.get(state, modelString),
-      formValue: s.getForm(state, modelString),
+      formValue: form,
     };
   }
 

src/reducers/form/change-action-reducer.js

@@ -8,6 +8,7 @@ import mapValues from '../../utils/map-values';
 import { createInitialState } from '../form-reducer';
 import initialFieldState from '../../constants/initial-field-state';
 import updateParentForms from '../../utils/update-parent-forms';
+import invariant from 'invariant';
 
 function updateFieldValue(field, action, parentModel = undefined) {
   const { value, removeKeys, silent, load, model } = action;
@@ -35,6 +36,11 @@ function updateFieldValue(field, action, parentModel = undefined) {
   }
 
   if (removeKeys) {
+    invariant(field && field.$form,
+      'Unable to remove keys. ' +
+      'Field for "%s" in store is not an array/object.',
+      model);
+
     const valueIsArray = Array.isArray(field.$form.value);
     const removeKeysArray = Array.isArray(removeKeys)
       ? removeKeys

src/utils/get-field-form.js

@@ -1,9 +1,16 @@
 import get from './get';
+import invariant from 'invariant';
 
 export default function getFieldForm(state, path) {
   const formPath = path.slice(0, -1);
 
   if (!formPath.length) return state;
 
-  return get(state, formPath);
+  const form = get(state, formPath);
+
+  invariant(form,
+    'Could not find form for "%s" in the store.',
+    formPath.join('.'));
+
+  return form;
 }

src/utils/get-field-from-state.js

@@ -2,6 +2,7 @@ import get from './get';
 import toPath from './to-path';
 import getForm from './get-form';
 import isPlainObject from 'lodash/isPlainObject';
+import invariant from 'invariant';
 
 const defaultStrategy = {
   getForm,
@@ -16,6 +17,10 @@ export default function getFieldFromState(state, modelString, s = defaultStrateg
 
   if (!modelString.length) return form;
 
+  invariant(form,
+    'Could not find form for "%s" in the store.',
+    modelString);
+
   const formPath = toPath(form.$form.model);
   const fieldPath = toPath(modelString).slice(formPath.length);
   const field = get(form, fieldPath);

src/utils/get-form.js

@@ -89,7 +89,9 @@ function getForm(state, modelString, s = defaultStrategy) {
     return null;
   }
 
-  return s.get(state, formStateKey);
+  const form = s.get(state, formStateKey);
+
+  return form;
 }
 
 export default getForm;

src/utils/update-field.js

@@ -2,6 +2,7 @@ import i from 'icepick';
 import get from './get';
 import mapValues from './map-values';
 import { createInitialState } from '../reducers/form-reducer';
+import invariant from 'invariant';
 
 function assocIn(state, path, value, fn) {
   if (!path.length) return i.assign(state, value);
@@ -28,6 +29,10 @@ export function getFieldAndForm(formState, modelPath) {
   let field = get(formState, modelPath);
   let form = formState;
 
+  invariant(form,
+    'Could not find form for "%s" in the store.',
+    modelPath);
+
   if (!field) {
     const initialValue = get(formState.$form.initialValue, modelPath);
 

src/utils/update-sub-fields.js

@@ -27,7 +27,7 @@ export default function updateSubFields(state, localPath, newState) {
 
   // only forms can have fields -
   // skip if field is not a form
-  if (!field.$form) return state;
+  if (!field || !field.$form) return state;
 
   // intermediate value - not mutated outside function
   const updatedField = {};

test/field-component-spec.js

@@ -1855,7 +1855,6 @@ Object.keys(testContexts).forEach((testKey) => {
       const filter = ({ constructor }) =>
         constructor.displayName === 'Connect(Control)';
       const components = TestUtils.findAllInRenderedTree(field, filter);
-      console.log(components);
       assert.lengthOf(components, 1, 'exactly one connected Control was rendered');
       const [component] = components;
       const oldStateProps = component.stateProps;