Uncaught Invariant Violation: traverseParentPath(...): Cannot traverse from and to the same ID, ``

Question

The setup

In my project I use a lot of libraries, but for this case I think these are relevant: redux-form, material-ui and parse.

In my app I have a form component that looks like this:

class ObjectForm {

  render() {
    const { fields: { field }, handleSubmit, submitting } = this.props;

    return (
      <form onSubmit={handleSubmit}>
        <TextField hintText="Hint Text" {...field} />
        <RaisedButton label="Send" type="submit" disabled={submitting} />
      </form>
    );
  }

}

Wrapped by a container, something like:

function mapStateToProps(state) {
  const { object } = state;
  return {
    object,
    initialValues: {
      field: object.get('field'),
    },
    onSubmit: data => {
      return object.save({
        field: data.field,
      });
    },
  };
}

export default reduxForm({
  form: 'objectForm',
  fields: [
    'field',
  ],
}, mapStateToProps)(ObjectForm);

The problem

The problem is that, when the form is dirty (I changed the value in the input), I get this error:

Uncaught Invariant Violation: traverseParentPath(...): Cannot traverse from and to the same ID, ``.

Besides that, the parse object actually gets saved, but the button doesn't disable while until the save ends.

If I just submit the form again, without changing any value, everything works just fine.

What could be causing it

Until now, I could find 3 pieces of code that, if removed, makes the error go away!

The first one is the submit button's disabled property. Removing the disabled={submitting} part, make the error go away, but then I miss the visual feedback. Update: If I remove the disabled attribute, but use submitting property to conditionally show a loading indicator no error is thrown, but the indicator isn't shown as well (although it does show up if the form is clean).

The second is not to send the initialValues prop to the reduxForm. Removing initialValues: {...} also makes the error go away.

Last but not least, not to set the new value to the parse object property also makes the error go away. Just remove the parameter from object.save call and everything works just fine.

Help!

I'm struggling for days because of this, I'm out of ideas.

Call stack

Answer 1

I was running into the same error and found the root cause by looking a little further up the callstack:

The "type" and "props" information led me to this little piece of code I had written, which for whatever reason was not getting managed in a nice way by react:

<textPath
 ref={(node) => {
        node && node.setAttribute("startOffset", '50%')
      }}
 >
   {text}
</textPath>

Commenting out the ref fixed it for me:

<textPath
// ref={(node) => {
//        node && node.setAttribute("startOffset", '50%')
//      }}
 >
   {text}
</textPath>

For me, solving it will probably mean moving to React 15 where svg tags are fully supported and I wont have to rely on the ref hack. I'm not sure what the fix will be in your case, but thought I'd share my scenario in case it helps anyone.

Cheers, Thomas