Uncaught Error: Unable to find element with ID with server side rendering

Everything works fine, except when doing initial page load via server side rendering. The error only occurs if I place anything inside the <Map></Map>.
If I use client side rendering, everything works as expected.
My situation is something similar to:

let ReactMapboxGl
let Map
let ZoomControl

if (window) {
  ReactMapboxGl = require('react-mapbox-gl')
  ZoomControl = ReactMapboxGl.ZoomControl 
  Map = ReactMapboxGl.Map({
    accessToken: '...',
    scrollZoom: false,
  })
}

...

render() {
  return Map &&
    <Map style="...">
      <ZoomControl />
    </Map>
}

The reason of the error is explained here https://github.com/facebook/react/issues/7093 . But I’m guessing there needs to be a solution for react-mapbox-gl to work with server side rendering. Any help is greatly appreciated!

[jthetzel]

Which version of React is installed? The error is supposed to go away in React 16 ( https://github.com/facebook/react/issues/7093#issuecomment-333512582 ).

[n23daniel]

Thanks for the componentDidMount tip. I’ve previously rendered using a CLIENT global variable I set during file compilation, server or client bundle. I still don’t fully understand why the check after componentDidMount works instead of checking only if it’s client before it mounts. Maybe React allows dom updates after component did mount, but not before as it already has the server’s dom with react ids. Anyways, Thanks a lot!