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

the setup

in project use lot of libraries, case think these relevant: redux-form, material-ui , parse.

in app have form component looks 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 container, 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 that, when form dirty (i changed value in input), error:

uncaught invariant violation: traverseparentpath(...): cannot traverse , same id, ``. 

besides that, parse object gets saved, button doesn't disable while until save ends.

if submit form again, without changing value, works fine.

what causing it

until now, find 3 pieces of code that, if removed, makes error go away!

the first 1 submit button's disabled property. removing disabled={submitting} part, make error go away, miss visual feedback. update: if remove disabled attribute, use submitting property conditionally show loading indicator no error thrown, indicator isn't shown (although show if form clean).

the second not send initialvalues prop reduxform. removing initialvalues: {...} makes error go away.

last not least, not set new value parse object property makes error go away. remove parameter object.save call , works fine.

help!

i'm struggling days because of this, i'm out of ideas.

call stack

i running same error , found root cause looking little further callstack:

the "type" , "props" information led me little piece of code had written, whatever reason not getting managed in nice way react:

<textpath  ref={(node) => {         node && node.setattribute("startoffset", '50%')       }}  >    {text} </textpath> 

commenting out ref fixed me:

<textpath // ref={(node) => { //        node && node.setattribute("startoffset", '50%') //      }}  >    {text} </textpath> 

for me, solving mean moving react 15 svg tags supported , wont have rely on ref hack. i'm not sure fix in case, thought i'd share scenario in case helps anyone.

cheers, thomas