{"action":"created","issue":{"url":"https://api.github.com/repos/erikras/redux-form/issues/919","repository_url":"https://api.github.com/repos/erikras/redux-form","labels_url":"https://api.github.com/repos/erikras/redux-form/issues/919/labels{/name}","comments_url":"https://api.github.com/repos/erikras/redux-form/issues/919/comments","events_url":"https://api.github.com/repos/erikras/redux-form/issues/919/events","html_url":"https://github.com/erikras/redux-form/issues/919","id":153486825,"node_id":"MDU6SXNzdWUxNTM0ODY4MjU=","number":919,"title":"\"Uncaught RangeError: Maximum call stack size exceeded\": deepEqual chokes on props.children","user":{"login":"gabrielecirulli","id":886011,"node_id":"MDQ6VXNlcjg4NjAxMQ==","avatar_url":"https://avatars1.githubusercontent.com/u/886011?v=4","gravatar_id":"","url":"https://api.github.com/users/gabrielecirulli","html_url":"https://github.com/gabrielecirulli","followers_url":"https://api.github.com/users/gabrielecirulli/followers","following_url":"https://api.github.com/users/gabrielecirulli/following{/other_user}","gists_url":"https://api.github.com/users/gabrielecirulli/gists{/gist_id}","starred_url":"https://api.github.com/users/gabrielecirulli/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gabrielecirulli/subscriptions","organizations_url":"https://api.github.com/users/gabrielecirulli/orgs","repos_url":"https://api.github.com/users/gabrielecirulli/repos","events_url":"https://api.github.com/users/gabrielecirulli/events{/privacy}","received_events_url":"https://api.github.com/users/gabrielecirulli/received_events","type":"User","site_admin":false},"labels":[{"id":242808380,"node_id":"MDU6TGFiZWwyNDI4MDgzODA=","url":"https://api.github.com/repos/erikras/redux-form/labels/bug","name":"bug","color":"fc2929","default":true}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":{"url":"https://api.github.com/repos/erikras/redux-form/milestones/1","html_url":"https://github.com/erikras/redux-form/milestone/1","labels_url":"https://api.github.com/repos/erikras/redux-form/milestones/1/labels","id":1736711,"node_id":"MDk6TWlsZXN0b25lMTczNjcxMQ==","number":1,"title":"next-6.0.0","description":"","creator":{"login":"ooflorent","id":168498,"node_id":"MDQ6VXNlcjE2ODQ5OA==","avatar_url":"https://avatars0.githubusercontent.com/u/168498?v=4","gravatar_id":"","url":"https://api.github.com/users/ooflorent","html_url":"https://github.com/ooflorent","followers_url":"https://api.github.com/users/ooflorent/followers","following_url":"https://api.github.com/users/ooflorent/following{/other_user}","gists_url":"https://api.github.com/users/ooflorent/gists{/gist_id}","starred_url":"https://api.github.com/users/ooflorent/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ooflorent/subscriptions","organizations_url":"https://api.github.com/users/ooflorent/orgs","repos_url":"https://api.github.com/users/ooflorent/repos","events_url":"https://api.github.com/users/ooflorent/events{/privacy}","received_events_url":"https://api.github.com/users/ooflorent/received_events","type":"User","site_admin":false},"open_issues":0,"closed_issues":103,"state":"open","created_at":"2016-04-28T15:08:08Z","updated_at":"2017-07-03T03:58:10Z","due_on":null,"closed_at":null},"comments":14,"created_at":"2016-05-06T16:18:14Z","updated_at":"2018-06-03T02:32:29Z","closed_at":"2016-05-09T23:08:37Z","author_association":"CONTRIBUTOR","body":"In `6.0.0-alpha.7`,  when using the new `<Field>` element, I've been encountering a strange error when trying to compose elements that accept `children` props and passing them their children via the `<Field>` component.\n\nHere is the most reduced working example I could get:\n\n``` jsx\nimport React, { Component } from \"react\";\nimport { reduxForm, Field } from \"redux-form/immutable\";\n\nexport default class InnerComponent extends Component {\n  render() {\n    return (\n      <div>\n        Something\n      </div>\n    );\n  }\n}\n\nexport default class CustomField extends Component {\n  render() {\n    return (\n      <div onClick={() => this.props.onChange(true)}>\n        {this.props.children}\n      </div>\n    );\n  }\n}\n\n@reduxForm({\n  form: \"event\",\n})\nexport default class EventForm extends Component {\n  render() {\n    return (\n      <Field\n        name=\"customField\"\n        component={CustomField}>\n          <InnerComponent/>\n      </Field>\n    );\n  }\n}\n```\n\nIn a nutshell, `CustomField` will render anything that's passed as children to it. It has a simple `onClick` handler to trigger the `onChange` callback passed by `redux-form`, which sets the whole issue in motion.\n\n`InnerComponent` is passed as a child. In my experiments, this issue does not happen when you pass just text inside `<Field>`.\n\nFrom what I was able to figure out, the following file is at the root of the stack overflow: https://github.com/erikras/redux-form/blob/v6/src/ConnectedField.js#L19\n\nWhat it does is it performs a deep comparison between the previous props and the next props of `<ConnectedField/>`, which is in-between `<Field>`, `<CustomField>` and `<InnerComponent>`.\n\n![set up a new event impraise 2016-05-06 6 pm-48-10](https://cloud.githubusercontent.com/assets/886011/15079840/2500f18c-13bb-11e6-97b5-7faeaafce945.png)\n\n`<ConnectedField/>`'s `props.children` is an `InnerComponent` element. The deep comparison moves on to `InnerComponent`'s `_owner` (private React property), which in this case is the top-level `EventForm` component. \n\nFrom that point, it's extremely easy to identify a circular reference, as you would only have to follow the `props.children` chain back down to find `InnerComponent` in order to close the loop.\n\nWhen this happens, the component fails to update.\n\nPotential solutions that I can think of:\n- Explicitly skip comparing the `children` property in the props object. Potential drawback: the component won't be able to tell when props changed. Potential workaround: only perform a shallow comparison of `children` objects.\n- Do not consider underscore-prepended properties in the deep comparison. Potential drawback: very opinionated approach and may interfere with things that are not related to React.\n- Impose a hard limit on the depth of the comparison that won't be exceeded. If everything matches up to that point, the objects are considered equal. Potential drawback: the circular reference may start at any point in the chain, even in shallow areas, which would moot this check.\n\n---\n\nI also attempted to pass the whole structure directly through the `component` prop:\n\n``` jsx\nimport React, { Component } from \"react\";\nimport { reduxForm, Field } from \"redux-form/immutable\";\n\nexport default class InnerComponent extends Component {\n  render() {\n    return (\n      <div>\n        Something\n      </div>\n    );\n  }\n}\n\nexport default class CustomField extends Component {\n  render() {\n    return (\n      <div onClick={() => this.props.onChange(true)}>\n        {this.props.children}\n      </div>\n    );\n  }\n}\n\n@reduxForm({\n  form: \"event\",\n})\nexport default class EventForm extends Component {\n  render() {\n    return (\n      <Field\n        name=\"customField\"\n        component={props => <CustomField><InnerComponent/></CustomField>}>\n\n      </Field>\n    );\n  }\n}\n```\n\nIn this case, I get the following error:\n\n`ReactCompositeComponent.js:154 Uncaught TypeError: Can't add property context, object is not extensible`.\n\nI did not investigate down this path further, as it seems like my initial attempt is more in line with the intended use of this API.\n\nSecondary details:\n- I'm using React 0.13 and Babel 5\n"},"comment":{"url":"https://api.github.com/repos/erikras/redux-form/issues/comments/394130480","html_url":"https://github.com/erikras/redux-form/issues/919#issuecomment-394130480","issue_url":"https://api.github.com/repos/erikras/redux-form/issues/919","id":394130480,"node_id":"MDEyOklzc3VlQ29tbWVudDM5NDEzMDQ4MA==","user":{"login":"lock[bot]","id":33595554,"node_id":"MDM6Qm90MzM1OTU1NTQ=","avatar_url":"https://avatars1.githubusercontent.com/in/6672?v=4","gravatar_id":"","url":"https://api.github.com/users/lock%5Bbot%5D","html_url":"https://github.com/apps/lock","followers_url":"https://api.github.com/users/lock%5Bbot%5D/followers","following_url":"https://api.github.com/users/lock%5Bbot%5D/following{/other_user}","gists_url":"https://api.github.com/users/lock%5Bbot%5D/gists{/gist_id}","starred_url":"https://api.github.com/users/lock%5Bbot%5D/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lock%5Bbot%5D/subscriptions","organizations_url":"https://api.github.com/users/lock%5Bbot%5D/orgs","repos_url":"https://api.github.com/users/lock%5Bbot%5D/repos","events_url":"https://api.github.com/users/lock%5Bbot%5D/events{/privacy}","received_events_url":"https://api.github.com/users/lock%5Bbot%5D/received_events","type":"Bot","site_admin":false},"created_at":"2018-06-03T02:32:28Z","updated_at":"2018-06-03T02:32:28Z","author_association":"NONE","body":"This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.\n"}}
{"actor":{"display_login":"lock"}}