Ravenous Part 4 TypeError: default.search is not a function

Deploying my final ravenous project yields this issue:

TypeError: util_Yelp__WEBPACK_IMPORTED_MODULE_5_.default.search is not a function

I’ve compared it to the raveous part 4 solution provided and still can’t seem to fix it. I’d love some help. Thank you.

SearchBar.js

import React from 'react';

import './SearchBar.css';

class SearchBar extends React.Component {

    constructor(props) {

        super(props);

        this.state = {

            term: '',

            location: '',

            sortBy: 'best_match'

        };

        this.handleTermChange = this.handleTermChange.bind(this);

        this.handleLocationChange = this.handleLocationChange.bind(this);

        this.handleSearch = this.handleSearch.bind(this);

        this.sortByOptions = {

            'Best Match': 'best_match',

            'Highest Rated': 'rating',

            'Most Reviewed': 'review_count'

        };

    }

    getSortByClass(sortByOption) {

        if (this.state.sortBy === sortByOption) {

            return 'active';

        } else {

            return '';

        }

    }

    handleSortByChange(sortByOption) {

        this.setState({ sortBy: sortByOption });

    }

    handleTermChange(event) {

        this.setState({ term: event.target.value });

    }

    handleLocationChange(event) {

        this.setState({ location: event.target.value });

    }

    handleSearch(event) {

        this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy);

        event.preventDefault();

    }

    renderSortByOptions() {

        return Object.keys(this.sortByOptions).map(sortByOption => {

            let sortByOptionValue = this.sortByOptions[sortByOption];

            return <li

                key={sortByOptionValue}

                className={this.getSortByClass(sortByOptionValue)}

                onClick={this.handleSortByChange.bind(this, sortByOptionValue)}>{sortByOption}</li>;

        });

    }

    render() {

        return (

            <div className="SearchBar">

                <div className="SearchBar-sort-options">

                    <ul>

                        {this.renderSortByOptions()}

                    </ul>

                </div>

                <div className="SearchBar-fields">

                    <input

                        placeholder="Search Businesses"

                        onChange={this.handleTermChange}

                    />

                    <input

                        placeholder="Where?"

                        onChange={this.handleLocationChange}

                    />

                </div>

                <div className="SearchBar-submit">

                    <a

                        href="www.#.com"

                        onClick={this.handleSearch}

                    >Let's Go</a>

                </div>

            </div>

        )

    }

}

export default SearchBar;

App.js

//import logo from './logo.svg';

import './App.css';

import React from 'react';

import BusinessList from '../BusinessList/BusinessList';

import SearchBar from '../SearchBar/SearchBar';

import Yelp from '../../util/Yelp';

class App extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      businesses: []

    };

    this.searchYelp = this.searchYelp.bind(this);

  }

  searchYelp(term, location, sortBy) {

    Yelp.search(term, location, sortBy).then(businesses => {

      this.setState({ businesses: businesses });

    });

  }

  render() {

    return (

      <div className="App">

        <h1>ravenous</h1>

        < SearchBar searchYelp={this.searchYelp} />

        < BusinessList businesses={this.state.businesses} />

      </div>

    );

  }

}

export default App;

Yelp.js

const apiKey = '4kp299a4ze7l5O4ItRBEbYzAMEc1iErjNRC_O8v30D8pWS_xu2seFxL4ZMrc6Pv9UnJ3k5vy-f9-j3ZczR8KopVpcTPDV32VAnzgzMwijpLVkAuS-Vzwh7la0tnUX3Yx';

const Yelp = {

    searchYelp(term, location, sortBy) {

        return fetch(`https://cors-anywhere.herokuapp.com//https://api.yelp.com/v3/businesses/search?term=${term}&location=${location}&sort_by=${sortBy}`,

            {

                headers: {

                    Authorization: `Bearer ${apiKey}`

                }

            }).then(response => {

                return response.json();

            }).then(jsonResponse => {

                if (jsonResponse.businesses) {

                    return jsonResponse.map(((business) => {

                        console.log(business);

                        return {

                            id: business.id,

                            imageSrc: business.image_url,

                            name: business.name,

                            address: business.address,

                            city: business.city,

                            state: business.state,

                            zipCode: business.zipCode,

                            category: business.category,

                            rating: business.rating,

                            reviewCount: business.reviewCount

                        }

                    }));

                }

            });

    }

};

export default Yelp;

Your App.js is trying to call the Yelp.search() method, but in your Yelp object, you named the method searchYelp()