error: use-places-autocomplete: Google Maps Places API library must be loaded.

[nonoumasy]

I'm using :
"next": "^12.0.0",
"use-places-autocomplete": "^1.10.0",
"react": "17.0.2",

I get the above error message in my EditForm when I use-places-autocomplete component.

I loaded this as a script in the index.js which is Nextjs entry page.

import Script from "next/script"

 <Script
        src={`https://maps.googleapis.com/maps/api/js?key=${process.env.NEXT_PUBLIC_PLACES_AUTOCOMPLETE}&libraries=places`}
      />

I think the above works because on my AddForm, I can use the library, however sometimes I do get the error message but it works anyway.
However, I have an EditForm component which calls data from a database and I'm trying to prefill the forms using this data. I get this error now and it's just not working.
I tried the asynchronous script loading but that gets an error when I use it.

I tried making it conditional to wait for the data from the database before rendering the use-places-autocomplete component.

Any thoughts? I really like this library. I've been using on all my apps now and would like to get this resolve so I can update the rest.
Thanks in advance.

[nonoumasy]

So I was able to resolve the issue using the Script tag inside a useEffect inside the component.

import Script from "next/script"

useEffect(() => {
    ;<Script
      src={`https://maps.googleapis.com/maps/api/js?key=${process.env.NEXT_PUBLIC_PLACES_AUTOCOMPLETE}&libraries=places`}
    />
  }, [])

However I'm still unable to use the asynchronous script loading.

[jokull]

I ran into a number of issues and decided on this dirty pattern for now:

import type { AppProps } from "next/app";
import Script from "next/script";
import { useState } from "react";

export default function App({ Component, pageProps }: AppProps) {
  const [googleApiLoaded, setGoogleApiLoaded] = useState(false);
  return (
    <>
      <Script
        src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&amp;libraries=places"
        onLoad={() => setGoogleApiLoaded(true)}
      ></Script>
      {googleApiLoaded && <Component {...pageProps} />}
    </>
  );
}