Delay Mapbox lib usage to fix server side rendering

src/components/LocationAutocompleteInput/GeocoderMapbox.js

@@ -66,10 +66,17 @@ export const GeocoderAttribution = () => null;
  * using the Mapbox Geocoding API.
  */
 class GeocoderMapbox {
-  constructor() {
-    this.client = window.mapboxSdk({
-      accessToken: window.mapboxgl.accessToken,
-    });
+  getClient() {
+    const libLoaded = typeof window !== 'undefined' && window.mapboxgl && window.mapboxSdk;
+    if (!libLoaded) {
+      throw new Error('Mapbox libraries are required for GeocoderMapbox');
+    }
+    if (!this._client) {
+      this._client = window.mapboxSdk({
+        accessToken: window.mapboxgl.accessToken,
+      });
+    }
+    return this._client;
   }
 
   // Public API
@@ -86,8 +93,8 @@ class GeocoderMapbox {
    * only relevant for the `getPlaceDetails` function below.
    */
   getPlacePredictions(search) {
-    return this.client.geocoding
-      .forwardGeocode({
+    return this.getClient()
+      .geocoding.forwardGeocode({
         query: search,
         limit: 5,
         language: [config.locale],

src/components/LocationAutocompleteInput/LocationAutocompleteInputImpl.js

@@ -146,8 +146,7 @@ class LocationAutocompleteInputImpl extends Component {
     // Ref to the input element.
     this.input = null;
 
-    this.geocoder = new Geocoder();
-
+    this.getGeocoder = this.getGeocoder.bind(this);
     this.currentPredictions = this.currentPredictions.bind(this);
     this.changeHighlight = this.changeHighlight.bind(this);
     this.selectPrediction = this.selectPrediction.bind(this);
@@ -172,6 +171,14 @@ class LocationAutocompleteInputImpl extends Component {
     this._isMounted = false;
   }
 
+  getGeocoder() {
+    // Create the Geocoder as late as possible only when it is needed.
+    if (!this._geocoder) {
+      this._geocoder = new Geocoder();
+    }
+    return this._geocoder;
+  }
+
   currentPredictions() {
     const { search, predictions: fetchedPredictions } = currentValue(this.props);
     const hasFetchedPredictions = fetchedPredictions && fetchedPredictions.length > 0;
@@ -267,7 +274,7 @@ class LocationAutocompleteInputImpl extends Component {
 
     this.setState({ fetchingPlaceDetails: true });
 
-    this.geocoder
+    this.getGeocoder()
       .getPlaceDetails(prediction)
       .then(place => {
         if (!this._isMounted) {
@@ -305,7 +312,7 @@ class LocationAutocompleteInputImpl extends Component {
   predict(search) {
     const onChange = this.props.input.onChange;
 
-    this.geocoder
+    this.getGeocoder()
       .getPlacePredictions(search)
       .then(results => {
         const { search: currentSearch } = currentValue(this.props);
@@ -457,7 +464,7 @@ class LocationAutocompleteInputImpl extends Component {
             rootClassName={predictionsClass}
             attributionClassName={predictionsAttributionClassName}
             predictions={predictions}
-            geocoder={this.geocoder}
+            geocoder={this.getGeocoder()}
             highlightedIndex={this.state.highlightedIndex}
             onSelectStart={this.handlePredictionsSelectStart}
             onSelectMove={this.handlePredictionsSelectMove}