React-mapbox-gl: Uncaught Error: Unable to find element with ID with server side rendering

[n23daniel]

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 answer! I'm using React 15 and I've tried updating to React 16, but I've got too many dependencies that don't support React 16, mostly because of the PropTypes update, so that's a think I can't do right now. Mainly asking if there is a solution with React 15 as I'm hoping there were guys that successfully used react-mapbox-gl with React 15 for server side rendering.

[alex3165]

Hi @n23daniel I think you should be able to make it working if you set a boolean in componentDidMount and use it to render the map (componentDidMount is not triggered on SSR).

In the meantime I will close this issue as it seems to be solved with React 16 anyway.

[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!

[tstirrat15]

To future people who find this issue: I've opened #639 to discuss a more permanent fix, but in the meantime, to get this library importing without errors on the backend, one way to approach it if you're using Webpack is use Webpack's null-loader in your server configuration to prevent Mapbox's code from ever being imported on the backend:

    rules: [
      {
        test: modulePath => (
          /mapbox-gl/.test(modulePath)
          && !/react-mapbox-gl/.test(modulePath)
        ),
        use: 'null-loader',
      },
    ...
    ],

Then the only thing you have to do is make sure that insertCss is false in the factory code on the backend. I did this using a process.env.BROWSER variable that I've provided through webpack's DefinePlugin, which is true on the client build and false on the server build.