react-google-maps recompose error - `not a function`

Question

I am getting an error when trying to run a top level defined react-google-maps component. (0 , _reactGoogleMaps.withProps) is not a function

Here is my code (codesandbox):

import * as React from 'react'
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker,
  withProps,
  withState,
  withHandlers
} from "react-google-maps";
import { compose } from 'recompose'

var service, refs;
const LocationPicker = compose(
  withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,places&key=AIzaSyDnKwHUG_EJXN5EEW6hTftZHYo8E8QTTXY",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  withScriptjs,
  withGoogleMap,
  withState('places', '', ''),
  withHandlers(() => {
    refs = {
      map: undefined,
    }

    return {
      onMapMounted: () => ref => {
        refs.map = ref
        service = new google.maps.places.PlacesService(refs.map.context.__SECRET_MAP_DO_NOT_USE_OR_YOU_WILL_BE_FIRED);
      },
    }
  }),
)((props) => {
  return (
    <GoogleMap
      ref={props.onMapMounted}
      defaultZoom={13}
      defaultCenter={{ lat: 42.3570637, lng: -71.06257679999999 }}
    >
      {props.marker &&
        <Marker position={{ lat: props.marker.lat, lng: props.marker.lng }} draggable={true} />
      }
    </GoogleMap>
  )
})



class HomeMap extends Component {
  state = {
    sideBarOpen: true,
    values: [800, 1200]
  }

  render() {
    return (
      <div>
        <div id="map-wrapper">
          <LocationPicker
            googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places"
            loadingElement={<div style={{ height: `100%` }} />}
            containerElement={<div style={{ height: `400px` }} />}
            mapElement={<div style={{ height: `100%` }} />}
            lat={42.357527}
            lng={-71.062778}
            marker={this.state.marker}
          />
        </div>
      </div>)
  }
}

Any ideas?

Answer 1

You are importing withProps from react-google-maps. You should import it from recompose:

import { compose, withProps } from 'recompose';