ReferenceError: fetch is not defined - React Geocode

Question

I have created a server-rendered react app. In different pages, I try to get multiple addresses from the user and I want to mark entered locations on Google Maps.

For testing purposes(to get familiar with geocode), I added react-geocode exactly like the reference. However, I get the error:

ReferenceError: fetch is not defined at /home/.../node_modules/react-geocode/lib/index.js:1:255

This is the component:

    import GoogleMapReact from 'google-map-react';
    import Geocode from "react-geocode";
    ...//other imports

    const AnyReactComponent = ({ text }) => <div>{text}</div>;

    class History extends Component {
      static defaultProps = {
        center: {
          lat: 59.95,
          lng: 30.33
        },
        zoom: 11
      };

      static async getInitialProps(props) {
        let addresscounts = await tracker.methods.zipCounts().call()

        //////////////////////////react-geocode////////////////////

        Geocode.setApiKey("~~~ API KEY ~~~");
        Geocode.fromAddress("Eiffel Tower").then(
          response => {
            const { lat, lng } = response.results[0].geometry.location;
            console.log(lat, lng);
          }, error => { console.error(error) }
        );

        ///////////////////////////////////

        return {
          addresscounts
        };
      }

      render(){
        return(
          <div style={{ height: '100vh', width: '100%' }}>
            <GoogleMapReact
              bootstrapURLKeys={{ key: "~~~ API KEY ~~~"}}
              defaultCenter={this.props.center}
              defaultZoom={this.props.zoom}
            >
              <AnyReactComponent
                lat={59.955413}
                lng={30.337844}
                text="My Marker" />
            </GoogleMapReact>
          </div>
        );
      }
    }

  export default History;

Can someone tell me what the problem is and how I can solve it? Do I need to send the request through the fetch API(node-fetch)?

possible duplicate: https://stackoverflow.com/questions/48433783/referenceerror-fetch-is-not-defined — Peter, Jul 15 '19 at 19:36
Possible duplicate of [ReferenceError: fetch is not defined](https://stackoverflow.com/questions/48433783/referenceerror-fetch-is-not-defined) — Peter, Jul 15 '19 at 19:36
`fetch` is a new interface added to the most current browsers to simplify the creation of Ajax requests. Some of the libraries you are using seem to need `fetch` to work. And they expect it to be available from the global scope. Since you are running your app from the server, you need to make sure that the `fetch` interface its available on that environment. Check this link for further information: [https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) — guzmonne, Jul 15 '19 at 19:57
The link posted by @guzmonne probably won't work, the docs say "This project doesn't work under Node.js environments.", so I'd suggest you try to use the "node-fetch" module here https://github.com/bitinn/node-fetch, it mimics the browser-fetch API on the server side, add it like this `global.fetch = require("node-fetch");`, maybe you'll have some luck with this! — exside, Jul 15 '19 at 20:01
@exside is right. Please use `node-fetch` instead or the one I provided. I'll delete my comment to avoid confusion. — guzmonne, Jul 15 '19 at 20:05

ReferenceError: fetch is not defined - React Geocode

0 Answers0