Type is invalid - expected a string or a class/function (for composite components) but got: undefined. Check the render method of Input.

[aleksandar-crs]

Hello. Application was running for a while(few months) and suddenly stopped working with error: Type is invalid - expected a string or a class/function (for composite components) but got: undefined. Check the render method of Input.

So whenever Geosuggest component should be rendered we get that error.
It is imported like this import Geosuggest from 'react-geosuggest';
I've also tried using const Geosuggest = require('react-geosuggest').default; but no luck with that either

This is entire log:

 warning.js?8a56:33 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `Input`.
    in Input (created by default_1)
    in div (created by default_1)
    in div (created by default_1)
    in default_1 (created by GoogleMapsLoader)
    in div (created by GoogleMapsLoader)
    in GoogleMapsLoader (created by HomeAddressSearch)
    in div (created by HomeAddressSearch)
    in HomeAddressSearch (created by Connect(HomeAddressSearch))
    in Connect(HomeAddressSearch) (created by InjectIntl(Connect(HomeAddressSearch)))
    in InjectIntl(Connect(HomeAddressSearch)) (created by HomeDelivery)
    in div (created by HomeDelivery)
    in div (created by HomeDelivery)
    in div (created by HomeDelivery)
    in HomeDelivery (created by Connect(HomeDelivery))
    in Connect(HomeDelivery) (created by InjectIntl(Connect(HomeDelivery)))
    in InjectIntl(Connect(HomeDelivery)) (created by Route)
    in Route (created by withRouter(InjectIntl(Connect(HomeDelivery))))
    in withRouter(InjectIntl(Connect(HomeDelivery))) (created by Home)
    in div (created by Home)
    in div (created by Home)
    in Home (created by Connect(Home))
    in Connect(Home) (created by InjectIntl(Connect(Home)))
    in InjectIntl(Connect(Home)) (created by Route)
    in div (created by Route)
    in Route (created by DefaultLayout)
    in DefaultLayout (created by App)
    in div (created by App)
    in Router (created by HashRouter)
    in HashRouter (created by App)
    in Provider (created by App)
    in IntlProvider (created by App)
    in App (created by Connect(App))
    in Connect(App) 

[yfr]

How to you use it? Can you show me some implementation code?

[aleksandar-crs]

Here it is. Developer who used to work on the app used googleMaps props in GeoSuggest(don't know why). As I was told, that worked for over a year at least. Maybe it's worth mentioning that application is wrapped in react-on-rails. Also, after updating the component nothing changed

renderSearchBar(googleMaps) {
    const {
      isAuthenticated,
      user,
      intl: { formatMessage },
      locale,
    } = this.props;
    let fixtures = [];
    if (isAuthenticated) {
      const {
        street,
        number,
        zip,
        city,
        coordinates: { lat, lon },
      } = user.address;
      const label = `${street} ${number}, ${zip} ${city}`;
      const location = { lat, lng: lon };
      fixtures = [{ label, location, className: 'favorite' }];
    }
    const invalidNumberCss = this.state.isInvalidNumber ? 'invalid' : '';
    
    const geosuggestLabel = document.getElementsByClassName('geosuggest-label')[0];
    const localizeString = () => {
      if (geosuggestLabel !== undefined){
        if (locale === 'it') {
          geosuggestLabel.innerText =
            'Indirizzi recenti';
        } else {
          geosuggestLabel.innerText =
            'Recent addresses';
        }
      }
    };

    return (
      <div className="address-search">
        <Geosuggest
          googleMaps={googleMaps}
          country="it"
          types={['address']}
          placeholder={formatMessage({
            id: 'client.home.delivery.address_search_placeholder',
          })}
          initialValue=""
          autoFocus={this.state.focusIndex === 0}
          fixtures={fixtures}
          onSuggestSelect={this.onSuggestSelect}
          placeDetailFields={['address_components', 'geometry']}
          skipSuggest={this.skipSuggest}
          onClick={localizeString}
          ref={(el) => (this._geoSuggest = el)}
        />
        ...
        render() {
    const { currentStep, locale } = this.props;

    if (currentStep === 4) {
      return null;
    }

    return (
      <div className="address col-lg-height col-top">
        <ReactGoogleMapLoader
          params={{
            key: GOOGLE_MAPS_API_KEY, // Define your api key here
            libraries: 'places,geometry', // To request multiple libraries, separate them with a comma
            language: locale,
          }}
          render={(googleMaps, error) => {
            if (googleMaps) {
              if (error) {
                // Show a custom error if SDK Authentication Error. See N/B 2 below.
                return <div>{error}</div>;
              }
              return this.renderSearchBar(googleMaps);
            }
            // Check for network error so loading state ends if user lost connection.
            if (error === 'Network Error') {
              return <div>{error}</div>;
            }
            return <div>Google address search is loading...</div>;
          }}
        />
      </div>
    );
  }```

[yfr]

Ok. Can't see anything suspicious. Unless you have changed something in the module itself I can't see where this error comes from.

You can pass your own google maps instance to geosuggest. Like in this case you create the instance with ReactGoogleMapLoader.

[yfr]

How is the geosuggest imported and installed?

[aleksandar-crs]

It's installed using yarn and it's imported like this: import Geosuggest from 'react-geosuggest';

[alagos]

Having this same issue. I'm just trying to integrate this library for the first time and I'm getting this error.
Not sure if it has to do that my project uses react 15.6, which is kind of old nowadays.

[alagos]

Ok, I tried with 2.13.0 and the issue disappeared.
To me, the problem might be related with this PR for 2.13.1, but sadly I don't have the time to check deeply, so I'll work with 2.13.0 in the meantime.