{"action":"opened","issue":{"url":"https://api.github.com/repos/grommet/grommet/issues/687","repository_url":"https://api.github.com/repos/grommet/grommet","labels_url":"https://api.github.com/repos/grommet/grommet/issues/687/labels{/name}","comments_url":"https://api.github.com/repos/grommet/grommet/issues/687/comments","events_url":"https://api.github.com/repos/grommet/grommet/issues/687/events","html_url":"https://github.com/grommet/grommet/issues/687","id":164969622,"number":687,"title":"addComponentAsRefTo error on client side when components rendered server side first","user":{"login":"stonecold123","id":9678061,"avatar_url":"https://avatars.githubusercontent.com/u/9678061?v=3","gravatar_id":"","url":"https://api.github.com/users/stonecold123","html_url":"https://github.com/stonecold123","followers_url":"https://api.github.com/users/stonecold123/followers","following_url":"https://api.github.com/users/stonecold123/following{/other_user}","gists_url":"https://api.github.com/users/stonecold123/gists{/gist_id}","starred_url":"https://api.github.com/users/stonecold123/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/stonecold123/subscriptions","organizations_url":"https://api.github.com/users/stonecold123/orgs","repos_url":"https://api.github.com/users/stonecold123/repos","events_url":"https://api.github.com/users/stonecold123/events{/privacy}","received_events_url":"https://api.github.com/users/stonecold123/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-07-12T00:34:20Z","updated_at":"2016-07-12T00:34:20Z","closed_at":null,"body":"I'm getting addComponentAsRefTo error on the client side when grommet components are rendered server side first and have the events bind to the DOM on the client side. \r\n\r\n````\r\naddComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded \r\n\r\n````\r\nI have no problem at all when the result is just html tags. \r\n\r\nI read that it has something to do with an duplicated React library. But I really can't figure out why. \r\n\r\n````\r\nimport React from 'react';\r\nimport Tabs from 'grommet/components/Tabs'\r\nimport Tab from 'grommet/components/Tab'\r\n\r\nexport default class ItemPage extends React.Component {\r\n    render(){\r\n        return <Tabs>\r\n            <Tab title=\"First Title\">\r\n                <h3>First Tab</h3>\r\n                <p>Contents of the first tab !</p>\r\n            </Tab>\r\n            <Tab title=\"Second Title\">\r\n                <h3>Second Tab</h3>\r\n                <p>Contents of the second tab</p>\r\n            </Tab>\r\n            <Tab title=\"Third Title\">\r\n                <h3>Third Tab</h3>\r\n                <p>Contents of the third tab</p>\r\n            </Tab>\r\n        </Tabs>\r\n    }\r\n}\r\nmodule.exports = ItemPage;\r\n````\r\nThe script on the client side to bind events back:\r\n\r\n````\r\n<script type=\"text/javascript\" src=\"https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.min.js\"></script>\r\n<script type=\"text/javascript\" src=\"https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.min.js\"></script>\r\n<script type=\"text/javascript\" src=\"https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js\"></script>\r\n\r\n<script type=\"text/javascript\" src=\"/js/build/ItemPage.js\"></script>    \r\n<script>\r\n    var container = document.getElementById(\"app\");\r\n    var component = ItemPage;\r\n    ReactDOM.render(React.createElement(component),container);\r\n</script>\r\n````\r\n\r\n````\r\n  \"devDependencies\": {\r\n    \"babel-cli\": \"^6.10.1\",\r\n    \"babel-core\": \"^6.10.4\",\r\n    \"babel-loader\": \"^6.2.4\",\r\n    \"babel-minify\": \"^0.1.12\",\r\n    \"babel-plugin-transform-decorators-legacy\": \"^1.3.4\",\r\n    \"babel-plugin-transform-member-expression-literals\": \"^6.8.0\",\r\n    \"babel-plugin-transform-merge-sibling-variables\": \"^6.8.0\",\r\n    \"babel-plugin-transform-minify-booleans\": \"^6.8.0\",\r\n    \"babel-plugin-transform-property-literals\": \"^6.8.0\",\r\n    \"babel-plugin-transform-simplify-comparison-operators\": \"^6.8.0\",\r\n    \"babel-polyfill\": \"^6.9.1\",\r\n    \"babel-preset-es2015\": \"^6.9.0\",\r\n    \"babel-preset-react\": \"^6.0.15\",\r\n    \"babel-preset-stage-0\": \"^6.0.15\",\r\n    \"babelify\": \"^7.3.0\",\r\n    \"grunt\": \"^1.0.1\",\r\n    \"gulp-babel\": \"^6.1.2\",\r\n    \"gulp-mocha\": \"*\",\r\n    \"gulp-sourcemaps\": \"^1.6.0\",\r\n    \"redux-devtools\": \"^3.3.1\"\r\n  },\r\n  \"dependencies\": {\r\n    \"grommet\": \"^0.6.9\",\r\n    \"react\": \"^15.2.1\",\r\n    \"react-bootstrap\": \"^0.29.5\",\r\n    \"react-dom\": \"^15.2.1\",\r\n    \"react-redux\": \"^4.4.5\",\r\n    \"redis\": \"*\",\r\n    \"redux\": \"^3.5.2\",\r\n  }\r\n````\r\n\r\n"}}
{"actor":{"display_login":"stonecold123"}}