How can I access google api script on the window object in next.js app?

Question

I am trying to use google api with a next.js app. I was reading the documentation and the next.js recommendation for implementing google api is to use next.js Head component. I loaded the script but can't seem to access the gapi property...

export default () => (
  <div>
    <Head>
      <link href="/static/styles.css" rel="stylesheet" />
      <script
        src="https://apis.google.com/js/platform.js?onload=init"
        async
        defer
      ></script>
    </Head>
    <Login />
  </div>
);

My GoogleClient file starts with

const GoogleClient = ({api}) => {
...
}

I used a Login component that initializes the GoogleClient file as

const Login = () => {
    useEffect(()=> {
        GoogleClient(window.gapi)
    }, [])
...
}

When I console.log window the gapi property exists on the window object but when I call window.gapi I get the following error --> Property 'gapi' does not exist on type 'Window & typeof globalThis'. I googled the error but haven't seen any posts on how to fix it.

bman · Accepted Answer · 2019-12-22 04:57:46Z

2

It turns out this was a duplicate error to other posts. I needed to install @types/gapi or @types/gapi.auth2 packages.

If you install the later, you would not need the former.

npm install @types/gapi.auth2 -D

edited Dec 22, 2019 at 4:57

bman

5,3454 gold badges40 silver badges75 bronze badges

answered Nov 9, 2019 at 22:02

matt a

416 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I access google api script on the window object in next.js app?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related