{"action":"created","issue":{"url":"https://api.github.com/repos/flyingant/react-scroll-to-component/issues/21","repository_url":"https://api.github.com/repos/flyingant/react-scroll-to-component","labels_url":"https://api.github.com/repos/flyingant/react-scroll-to-component/issues/21/labels{/name}","comments_url":"https://api.github.com/repos/flyingant/react-scroll-to-component/issues/21/comments","events_url":"https://api.github.com/repos/flyingant/react-scroll-to-component/issues/21/events","html_url":"https://github.com/flyingant/react-scroll-to-component/issues/21","id":370308367,"node_id":"MDU6SXNzdWUzNzAzMDgzNjc=","number":21,"title":"Does not work in production mode when used on a Gatsby site","user":{"login":"rennehir","id":24566763,"node_id":"MDQ6VXNlcjI0NTY2NzYz","avatar_url":"https://avatars3.githubusercontent.com/u/24566763?v=4","gravatar_id":"","url":"https://api.github.com/users/rennehir","html_url":"https://github.com/rennehir","followers_url":"https://api.github.com/users/rennehir/followers","following_url":"https://api.github.com/users/rennehir/following{/other_user}","gists_url":"https://api.github.com/users/rennehir/gists{/gist_id}","starred_url":"https://api.github.com/users/rennehir/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rennehir/subscriptions","organizations_url":"https://api.github.com/users/rennehir/orgs","repos_url":"https://api.github.com/users/rennehir/repos","events_url":"https://api.github.com/users/rennehir/events{/privacy}","received_events_url":"https://api.github.com/users/rennehir/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2018-10-15T19:23:58Z","updated_at":"2018-11-20T20:20:21Z","closed_at":null,"author_association":"NONE","body":"```json\r\n\"dependencies\": {\r\n    \"gatsby\": \"^2.0.0\",\r\n    \"react-scroll-to-component-ssr\": \"^1.0.0\",\r\n    ...\r\n}\r\n```\r\n\r\nTried with the ssr version and the original one. Works with `gatsby develop` but not when built and served. Is there a plugin I need or have I missed something?"},"comment":{"url":"https://api.github.com/repos/flyingant/react-scroll-to-component/issues/comments/440416143","html_url":"https://github.com/flyingant/react-scroll-to-component/issues/21#issuecomment-440416143","issue_url":"https://api.github.com/repos/flyingant/react-scroll-to-component/issues/21","id":440416143,"node_id":"MDEyOklzc3VlQ29tbWVudDQ0MDQxNjE0Mw==","user":{"login":"WhippetsAintDogs","id":9271409,"node_id":"MDQ6VXNlcjkyNzE0MDk=","avatar_url":"https://avatars2.githubusercontent.com/u/9271409?v=4","gravatar_id":"","url":"https://api.github.com/users/WhippetsAintDogs","html_url":"https://github.com/WhippetsAintDogs","followers_url":"https://api.github.com/users/WhippetsAintDogs/followers","following_url":"https://api.github.com/users/WhippetsAintDogs/following{/other_user}","gists_url":"https://api.github.com/users/WhippetsAintDogs/gists{/gist_id}","starred_url":"https://api.github.com/users/WhippetsAintDogs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/WhippetsAintDogs/subscriptions","organizations_url":"https://api.github.com/users/WhippetsAintDogs/orgs","repos_url":"https://api.github.com/users/WhippetsAintDogs/repos","events_url":"https://api.github.com/users/WhippetsAintDogs/events{/privacy}","received_events_url":"https://api.github.com/users/WhippetsAintDogs/received_events","type":"User","site_admin":false},"created_at":"2018-11-20T20:20:21Z","updated_at":"2018-11-20T20:20:21Z","author_association":"NONE","body":"Okay, I found a solution. It seems that a Gatsby site in production when you set a ref on a component, it stays null. But... if the ref is set on the most encapsulating element in the component's render method, it doesn't stay null. \r\n\r\nThe way to do it is to set the ref on the component and use a `React.forwardRef` in the component like this: \r\n```\r\n// Parent container:\r\n\r\nthis.servicesRef = React.createRef()\r\n\r\nrender() {\r\n    return (\r\n      <Layout>\r\n        <Header servicesRef={this.servicesRef} /> // it won't be null if forwardRef is used in Services\r\n        <Services\r\n          ref={this.servicesRef}\r\n        />\r\n        …\r\n      </Layout>\r\n    )\r\n  }\r\n\r\n// Child component:\r\n\r\nconst Services = React.forwardRef((props, ref) => (\r\n  <div ref={ref}>\r\n   …\r\n  </div>\r\n))\r\n```"}}
{"actor":{"display_login":"WhippetsAintDogs"}}