TypeError: Object(…) is not a function (React)

I was following a tutorial on how to add google maps to a react/expo javascript project. I am new to the javascript language and have had a bug that I cannot find an answer to. when compiling the app I am given the error “TypeError: Object(…) is not a function“. here is the link to the tutorial: https://www.youtube.com/watch?v=WZcxJGmLbSo&t. Thank you.

The error is on the line 25 of the script:

22 | 
  23 | 
  24 | }
> 25 | export default function App() {
  26 |   const {isLoaded, LoadError} = UseLoadScript({
  27 |     googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
  28 |     libraries,```

Full script:

import React from 'react';

import {
  GoogleMap,
  UseLoadScript,
  Marker,
  InfoWindow,

} from "@react-google-maps/api";

const libraries = ["places"];
const mapContainerStyle = {
  width: "100vw",
  height: "100vh",

};

const center = {
  lat: 43.653225,
  lng: -79.383186


}
export default function App() {
  const {isLoaded, LoadError} = UseLoadScript({
    googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
    libraries,
  });
   
  
  if (LoadError) return "Error Loading maps";
  if (!isLoaded) return "Loading Maps";

  return <div> 

    <GoogleMap> 
      mapContainerStyle={mapContainerStyle} 
      zoom={8}
      center={center}
      </GoogleMap>
  </div>
  
}

Answer

I think your import(UseLoadScript) is wrong. Check here once useLoadScript

import { useLoadScript } from '@react-google-maps/api';

Advertisement

Answer