DEV Community

ahbarajaib
ahbarajaib

Posted on

Unable to implement @react-google-maps/api without getting useRef() error on my website

I tried watching videos and articles and copied almost the same code but this error doesn't go useRef() always shows up

import React from "react"; import { GoogleMap, useJsApiLoader } from "@react-google-maps/api"; const containerStyle = { width: "400px", height: "400px", }; const center = { lat: -3.745, lng: -38.523, }; function MapComponent() { const { isLoaded } = useJsApiLoader({ id: "google-map-script", googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY, }); const [map, setMap] = React.useState(null); const onLoad = React.useCallback(function callback(map) { const bounds = new window.google.maps.LatLngBounds(center); map.fitBounds(bounds); setMap(map); }, []); const onUnmount = React.useCallback(function callback(map) { setMap(null); }, []); return isLoaded ? ( <GoogleMap mapContainerStyle={containerStyle} center={center} zoom={10} onLoad={onLoad} onUnmount={onUnmount} > {/* Child components, such as markers, info windows, etc. */} <></> </GoogleMap> ) : ( <></> ); } export default React.memo(MapComponent); 
Enter fullscreen mode Exit fullscreen mode

This is how I implement the component

 <div style={{ height: "100vh", width: "100%" }}> <MapComponent /> </div> 
Enter fullscreen mode Exit fullscreen mode

Error

ERROR Cannot read properties of null (reading 'useRef') TypeError: Cannot read properties of null (reading 'useRef') at useRef (http://localhost:3000/static/js/bundle.js:129416:25) at useJsApiLoader (http://localhost:3000/static/js/bundle.js:86513:64) at MapComponent (http://localhost:3000/static/js/bundle.js:3971:77) at renderWithHooks (http://localhost:3000/static/js/bundle.js:55933:22) at updateFunctionComponent (http://localhost:3000/static/js/bundle.js:58813:24) at updateSimpleMemoComponent (http://localhost:3000/static/js/bundle.js:58675:14) at updateMemoComponent (http://localhost:3000/static/js/bundle.js:58548:18) at beginWork (http://localhost:3000/static/js/bundle.js:60578:20) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:45529:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:45573:20) 
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
ahbarajaib profile image
ahbarajaib

This is the console error.

react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. printWarning @ react.development.js:209 error @ react.development.js:183 resolveDispatcher @ react.development.js:1592 useRef @ react.development.js:1629 useJsApiLoader @ useJsApiLoader.tsx:35 MapComponent @ Map.js:15 renderWithHooks @ react-dom.development.js:16305 updateFunctionComponent @ react-dom.development.js:19588 updateSimpleMemoComponent @ react-dom.development.js:19425 updateMemoComponent @ react-dom.development.js:19284 beginWork @ react-dom.development.js:21673 callCallback @ react-dom.development.js:4164 invokeGuardedCallbackDev @ react-dom.development.js:4213 invokeGuardedCallback @ react-dom.development.js:4277 beginWork$1 @ react-dom.development.js:27451 performUnitOfWork @ react-dom.development.js:26557 workLoopSync @ react-dom.development.js:26466 renderRootSync @ react-dom.development.js:26434 recoverFromConcurrentError @ react-dom.development.js:25850 performConcurrentWorkOnRoot @ react-dom.development.js:25750 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533 react.development.js:1630 Uncaught TypeError: Cannot read properties of null (reading 'useRef') at useRef (react.development.js:1630:1) at useJsApiLoader (useJsApiLoader.tsx:35:1) at MapComponent (Map.js:15:1) at renderWithHooks (react-dom.development.js:16305:1) at updateFunctionComponent (react-dom.development.js:19588:1) at updateSimpleMemoComponent (react-dom.development.js:19425:1) at updateMemoComponent (react-dom.development.js:19284:1) at beginWork (react-dom.development.js:21673:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1) useRef @ react.development.js:1630 useJsApiLoader @ useJsApiLoader.tsx:35 MapComponent @ Map.js:15 renderWithHooks @ react-dom.development.js:16305 updateFunctionComponent @ react-dom.development.js:19588 updateSimpleMemoComponent @ react-dom.development.js:19425 updateMemoComponent @ react-dom.development.js:19284 beginWork @ react-dom.development.js:21673 callCallback @ react-dom.development.js:4164 invokeGuardedCallbackDev @ react-dom.development.js:4213 invokeGuardedCallback @ react-dom.development.js:4277 beginWork$1 @ react-dom.development.js:27451 performUnitOfWork @ react-dom.development.js:26557 workLoopSync @ react-dom.development.js:26466 renderRootSync @ react-dom.development.js:26434 recoverFromConcurrentError @ react-dom.development.js:25850 performConcurrentWorkOnRoot @ react-dom.development.js:25750 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533 react-dom.development.js:18687 The above error occurred in the <MapComponent> component: at MapComponent (http://localhost:3000/static/js/bundle.js:3971:77) at div at div at http://localhost:3000/static/js/bundle.js:38203:8 at div at http://localhost:3000/static/js/bundle.js:41262:3 at div at http://localhost:3000/static/js/bundle.js:38359:3 at FormContainer (http://localhost:3000/static/js/bundle.js:3248:3) at ShippingScreen (http://localhost:3000/static/js/bundle.js:15142:72) at RenderedRoute (http://localhost:3000/static/js/bundle.js:73422:5) at Routes (http://localhost:3000/static/js/bundle.js:74043:5) at div at http://localhost:3000/static/js/bundle.js:38359:3 at main at div at Router (http://localhost:3000/static/js/bundle.js:73981:15) at BrowserRouter (http://localhost:3000/static/js/bundle.js:72032:5) at App at Provider (http://localhost:3000/static/js/bundle.js:68727:3) Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. logCapturedError @ react-dom.development.js:18687 update.callback @ react-dom.development.js:18720 callCallback @ react-dom.development.js:13923 commitUpdateQueue @ react-dom.development.js:13944 commitLayoutEffectOnFiber @ react-dom.development.js:23391 commitLayoutMountEffects_complete @ react-dom.development.js:24688 commitLayoutEffects_begin @ react-dom.development.js:24674 commitLayoutEffects @ react-dom.development.js:24612 commitRootImpl @ react-dom.development.js:26823 commitRoot @ react-dom.development.js:26682 finishConcurrentRender @ react-dom.development.js:25892 performConcurrentWorkOnRoot @ react-dom.development.js:25809 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533 react.development.js:1630 Uncaught TypeError: Cannot read properties of null (reading 'useRef') at useRef (react.development.js:1630:1) at useJsApiLoader (useJsApiLoader.tsx:35:1) at MapComponent (Map.js:15:1) at renderWithHooks (react-dom.development.js:16305:1) at updateFunctionComponent (react-dom.development.js:19588:1) at updateSimpleMemoComponent (react-dom.development.js:19425:1) at updateMemoComponent (react-dom.development.js:19284:1) at beginWork (react-dom.development.js:21673:1) at beginWork$1 (react-dom.development.js:27426:1) at performUnitOfWork (react-dom.development.js:26557:1) 
Enter fullscreen mode Exit fullscreen mode