Invariant Violation: You need to provide libraries={["places"]} prop to <LoadScript /> component undefined

[karan-wiz]

"use client";
import React, { useState, useCallback, useEffect, useRef } from "react";
import {
GoogleMap,
useLoadScript,
Marker,
Autocomplete,
} from "@react-google-maps/api";

const LIBRARIES = ["places"];

const isMobile =
typeof window !== "undefined" &&
window.innerWidth > 250 &&
window.innerWidth < 600;

const mapContainerStyle = {
width: isMobile ? "100%" : "50%", // 640px corresponds to 'sm' size in Tailwind
height: "400px",
};

const defaultCenter = {
lat: 40.712776,
lng: -74.005974,
};

const GoogleMapComponent = ({
paddress,
setPaddress,
latlong,
setLatlong,
serachError,
onLocationSearch,
}) => {
const { isLoaded, loadError } = useLoadScript({
googleMapsApiKey: process.env.NEXT_PUBLIC_MAPS_KEY,
libraries: LIBRARIES,
});

const [marker, setMarker] = useState(null);
const [localAddress, setLocalAddress] = useState(paddress || "");

useEffect(() => {
if (latlong.latitude && latlong.longitude) {
setMarker({
lat: Number(latlong.latitude),
lng: Number(latlong.longitude),
});
}
}, [latlong]);

const [autocomplete, setAutocomplete] = useState(null);
const mapRef = useRef();

[karan-wiz]

I have followed the code as per the document but when the map is loaded for the first time then the page breaks and when I load it for the second time then everything works fine

[danimc]

Hi @karan-wiz

I encountered the same error earlier. I resolved it by using a state the libraries array:

const [libraries] = useibraries>(places'])

then called it:

  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey,
    libraries
  })