React-google-maps: React.createElement: type should not be null, undefined, boolean, or number when using SearchBox

[davidbarker]

I'm trying to use a SearchBox within my map, but keep running into the console errors:

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

My (simplified) code is as follows:

import { GoogleMap, Marker, SearchBox, withGoogleMap } from 'react-google-maps';

...

const MyMap = withGoogleMap(React.createClass({
    render: function() {
        marker = (
            <Marker position={this.props.marker.location} />
        )

        return (
            <GoogleMap
                defaultZoom={3}
                defaultCenter={{ lat: -25.363882, lng: 131.044922 }}
                onClick={this.props.handleMapClick}
                options={{
                    zoomControl: true
                }} >
                <SearchBox
                    inputPlaceholder="Search for a location"
                    inputStyle={{
                        boxSizing: `border-box`,
                        MozBoxSizing: `border-box`,
                        border: `1px solid transparent`,
                        width: `240px`,
                        height: `32px`,
                        marginTop: `27px`,
                        padding: `0 12px`,
                        borderRadius: `1px`,
                        boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
                        fontSize: `14px`,
                        outline: `none`,
                        textOverflow: `ellipses`,
                    }} />
                {marker}
            </GoogleMap>
        )
    }
}));

I've tried a few different ways based on the SearchBox example, but keep getting the error no matter what I try. Without the SearchBox producing the error, the map works great. Thanks.

[thzinc]

Where is marker defined? I see that you're including {marker} after the <SearchBox /> component, but I don't see its definition anywhere.

[davidbarker]

Oh, sorry. I removed that to cut down on the code I pasted but forgot to remove {marker}. I've edited my post above to include it. That works, though — the marker shows as expected.

[thzinc]

Now I see it. SearchBox isn't exported from react-google-maps. It's available from react-google-maps/lib/places/SearchBox.

import { GoogleMap, Marker, withGoogleMap } from 'react-google-maps';
import SearchBox from 'react-google-maps/lib/places/SearchBox';

I extrapolated this from the examples. It looks like you'll need to specify at least controlPosition, and maybe bounds in order for this to work, but the example should help you see how it's wired up.

[davidbarker]

Aaah, yes. Thank you so much! I suspected it was something to do with the imports, but I couldn't quite figure it out. I had to add controlPosition as you suggested, but also add ?libraries=places to my Google Maps JS tag for it to work, but it seems to work now. Thanks again.