Next.js Head - You have included the Google Maps JavaScript API multiple times on this page-CodePudding

In order to use the react-places-autocomplete lib, I implemented the gmaps script as stated in the doc but I get a "You have included the Google Maps JavaScript API multiple times on this page." error when I go to any page with 4-5 copy of the script tag.

If I remove the GooglePlacesScript component, no instance of the script is added.

If I put the GooglePlacesScript component at a page or component level, I still get the error wherever I go on the website somehow.

Any idea why Next is duplicating the script?

GooglePlacesScript component:

import React from "react";
import getConfig from "next/config";
import Head from "next/head";

const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
const GOOGLE_MAPS_API_KEY =
  serverRuntimeConfig.GOOGLE_MAPS_API_KEY ||
  publicRuntimeConfig.GOOGLE_MAPS_API_KEY;

const GooglePlacesScript = () => {
  return (
    <Head>
      <script
        type="text/javascript"
        src={
          "https://maps.googleapis.com/maps/api/js?key="  
          GOOGLE_MAPS_API_KEY  
          "&libraries=places"
        }
      ></script>
    </Head>
  );
};

export default GooglePlacesScript;

_app.js:

import { ThemeProvider } from "styled-components";
import { theme } from "@styles";
import { BaseCSS } from "styled-bootstrap-grid";
import "@fortawesome/fontawesome-svg-core/styles.css";
import "pure-react-carousel/dist/react-carousel.es.css";
import "react-input-range/lib/css/index.css";
import "@styles/_app.css";
import "swiper/swiper-bundle.min.css";
import CartManager from "@components/Cart/CartManager";
import CartContextProvider from "contexts/CartContext";
import AuthContextProvider from "contexts/AuthContext";
import AuthManager from "@components/Auth/AuthManager";
import FavoritesManager from "@components/Favorites/FavoritesManager";
import FavoritesContextProvider from "contexts/FavoritesContext";
import GooglePlacesScript from "@components/GooglePlacesScript";

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      <BaseCSS />
      <AuthContextProvider>
        <AuthManager>
          <CartContextProvider>
            <CartManager>
              <FavoritesContextProvider>
                <FavoritesManager>
                  <GooglePlacesScript />
                  <Component {...pageProps} />
                </FavoritesManager>
              </FavoritesContextProvider>
            </CartManager>
          </CartContextProvider>
        </AuthManager>
      </AuthContextProvider>
    </ThemeProvider>
  );
}

export default MyApp;

Solution Edit: Updated GooglePlacesScript code using next/script (Next v11 ):

import React from "react";
import getConfig from "next/config";
import Script from "next/script";

const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
const GOOGLE_MAPS_API_KEY =
  serverRuntimeConfig.GOOGLE_MAPS_API_KEY ||
  publicRuntimeConfig.GOOGLE_MAPS_API_KEY;

const source = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY}&libraries=places`;

const GooglePlacesScript = () => {
  return (
    <Script type="text/javascript" src={source} strategy="beforeInteractive" />
  );
};

export default GooglePlacesScript;

CodePudding user response：

Found Solution: Updated GooglePlacesScript code using next/script (Next v11 ):

import React from "react";
import getConfig from "next/config";
import Script from "next/script";

const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
const GOOGLE_MAPS_API_KEY =
  serverRuntimeConfig.GOOGLE_MAPS_API_KEY ||
  publicRuntimeConfig.GOOGLE_MAPS_API_KEY;

const source = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY}&libraries=places`;

const GooglePlacesScript = () => {
  return (
    <Script type="text/javascript" src={source} strategy="beforeInteractive" />
  );
};

export default GooglePlacesScript;

CodePudding user response：

I would suggest using @googlemaps/react-wrapper.

import { Wrapper } from "@googlemaps/react-wrapper";

const MyApp = () => (
  <Wrapper apiKey={"YOUR_API_KEY"}>
    <MyMapComponent />
  </Wrapper>
);