No overload matches this call.in react

Question

I am getting this error:

D:/Downloads/Uber-Website-Clone-master/src/App.tsx TypeScript error in D:/Downloads/Uber-Website-Clone-master/src/App.tsx(17,7): No overload matches this call. Overload 1 of 2, '(props: Readonly): LoadScript', gave the following error.

D:/Downloads/Uber-Website-Clone-master/src/App.tsx
TypeScript error in D:/Downloads/Uber-Website-Clone-master/src/App.tsx(17,7):
No overload matches this call.
  Overload 1 of 2, '(props: Readonly<LoadScriptProps>): LoadScript', gave the following error.
    Type 'string | undefined' is not assignable to type 'string'.
      Type 'undefined' is not assignable to type 'string'.
  Overload 2 of 2, '(props: LoadScriptProps, context?: any): LoadScript', gave the following error.
    Type 'string | undefined' is not assignable to type 'string'.
      Type 'undefined' is not assignable to type 'string'.  TS2769

    15 |     <div className="App">
    16 |       <LoadScript 
  > 17 |       googleMapsApiKey={process.env.REACT_APP_GOOGLE_TOKEN}
       |       ^
    18 |         libraries={['places']}
    19 |       >
    20 |         <CoordinatesProvider>

Here is the code:

import React, { useEffect } from 'react';
import { LoadScript } from '@react-google-maps/api';

import './global.css';

import CoordinatesProvider from './context/coordinates';

import Header from './components/Header';
import Map from './components/Map';
import Search from './components/Search';

function App() {

  return (
    <div className="App">
      <LoadScript 
      googleMapsApiKey={process.env.REACT_APP_GOOGLE_TOKEN}
        libraries={['places']}
      >
        <CoordinatesProvider>
          <Header />
          <Search />
          <Map />
        </CoordinatesProvider>
      </LoadScript>
    </div>
  );

}

export default App;

Answer 1

process.env.REACT_APP_GOOGLE_TOKEN returns a string, if the value is set in environment or undefined, if not set. With this information, let's look at the error:

  > 17 |       googleMapsApiKey={process.env.REACT_APP_GOOGLE_TOKEN}

You are trying to set googleMapsApiKey as a prop to LoadScript component. LoadScript definitely require a string type to function, and it does not accept any other type. Whereas our process.env may return an undefined value.

To solve this, you need to make sure process.env.REACT_APP_GOOGLE_TOKEN is a string. You can do it in multiple ways: checking the variable before hand and taking appropriate action by throwing and error or displaying an error message, or setting a default value. Here is my preferred way:

function App() {

  const key = process.env.REACT_APP_GOOGLE_TOKEN;
  if(!key){
    // you can throw error here and 
    // let [Error Boundary](https://reactjs.org/docs/error-boundaries.html)
    // handle it
    // or return an component that says "Google Token is not set"
    throw new Error('Google token is not set');
  }

  return (
    <div className="App">
      <LoadScript 
      googleMapsApiKey={key}
        libraries={['places']}
      >
        <CoordinatesProvider>
          <Header />
          <Search />
          <Map />
        </CoordinatesProvider>
      </LoadScript>
    </div>
  );

}

Answer 2

Wrapping the env variable in string literal worked for me.

import React, { useEffect } from 'react';
import { LoadScript } from '@react-google-maps/api';

import './global.css';

import CoordinatesProvider from './context/coordinates';

import Header from './components/Header';
import Map from './components/Map';
import Search from './components/Search';

function App() {

  return (
    <div className="App">
      <LoadScript 
      googleMapsApiKey={`${process.env.REACT_APP_GOOGLE_TOKEN}`}
        libraries={['places']}
      >
        <CoordinatesProvider>
          <Header />
          <Search />
          <Map />
        </CoordinatesProvider>
      </LoadScript>
    </div>
  );

}

export default App;