How do you set up a global properties on `window` object in React TypeScript?

Question

I'm trying to use the react-google-recaptcha library and required to use the enterprise mode. In the documentation, it is possible to use the enterprise mode by setting the global properties, but I'm confused on how to set the global properties using window.recaptchaOptions in react. Where should I put it and how to actually set the the enterprise key into true ?

I did some research and I found that to access the window object, you actually need to use the componentDidMount or useEffect , but it doesn't seem to work properly. When the enterprise mode is turned on, the script tag should load a javascript file from https://www.google.com/recaptcha/enterprise.js and not https://www.google.com/recaptcha/api.js

https://codesandbox.io/s/charming-mendel-kp3wdt?file=/src/App.js

//_app.tsx

declare global {
  interface Window { recaptchaOptions: any; }
}

useEffect(() => {
    window.recaptchaOptions = {
        enterprise: true
    }
}, [])

Answer 1

Found the solution, just need to add the condition of (typeof window !== undefined) inside the useEffect

//_app.tsx

declare global {
  interface Window { recaptchaOptions: any; }
}

useEffect(() => {
    if (typeof window !== undefined)
        window.recaptchaOptions = {
            enterprise: true
        }
}, [])