Typescript says NextJS environment variables are undefined

Question

I'm trying to make social login using 'react-google-login'.

.env in root

NEXT_PUBLIC_GOOGLE_CLIENT_ID=askfjaskf

Ready.tsx

import { GoogleLogin } from "react-google-login";
<GoogleLogin
    clientId={process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}
    render={(props) => (
      <div onClick={props.onClick}>
        <div>구글 로그인</div>
      </div>
    )}
    onSuccess={(res) => {
      const { profileObj } = res as any;
      setStep(AuthStep.AGREE);
    }}
    onFailure={(res) => {
      console.log("Google Error", res);
    }}
  />

And in clientId, it says

No overload matches this call. Overload 1 of 2, '(props: GoogleLoginProps | Readonly): GoogleLogin', 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: GoogleLoginProps, context: any): GoogleLogin', gave the following error. Type 'string | undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'.ts(2769) index.d.ts(80, 12): The expected type comes from property 'clientId' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<...>'

I don't know why it says it can be undefined. And it works on local but it doesn't work in production deployment. Anyone can help?

mrkosima · Answer 1 · 2022-11-05T17:18:02.987

11

The answer with declare global { ... didn't work out for me. But this one did:

declare namespace NodeJS {
  interface ProcessEnv {
    JWT_TOKEN: string;
  }
}

Add reference to the new file in next-env.d.ts:

/// <reference types="./environment" />

UPD 2022 (next.js 12+):

Next.js docs mention that:

A file named next-env.d.ts will be created at the root of your project [...] You should not remove it or edit it as it can change at any time.

Instead, please use a recommended approach:

Instead of editing next-env.d.ts, you can include additional types by adding a new file e.g. additional.d.ts and then referencing it in the include array in your tsconfig.json.

edited Nov 05 '22 at 17:18

answered Apr 25 '22 at 20:19

mrkosima

406
5
9

1

This worked for me, but I didn't need to add the reference to the new file in `next-env.d.ts`. I made the file named `environmnt.d.td` and vs code picked it up automatically. – chuckieDub May 17 '22 at 18:06
1

The Next.js docs mention not edit the `next-env.d.ts` directly. Instead, create a separate filename.d.ts file and then add it in your `tsconfig.json` under `include` property - [Nextjs doc link](https://nextjs.org/docs/basic-features/typescript#existing-projects) – shaahiin Aug 28 '22 at 22:42

score 9 · Accepted Answer · answered Nov 10 '21 at 04:03

I had the same issue but with different ENV variable, the issue is typescript doesn't know if an ENV variable exists or not.

Check this other question: using process.env in TypeScript

It helped me fixing this problem. Just need to create the environment.d.ts and declare the global ENV variables as the type you want them to be

declare global {
  namespace NodeJS {
    interface ProcessEnv {
      NEXT_PUBLIC_GOOGLE_CLIENT_ID: string; // this is the line you want
      NODE_ENV: 'development' | 'production';
      PORT?: string;
      PWD: string;
    }
  }
}

score 3 · Answer 3 · answered Jan 17 '23 at 13:40

3

you need to cast it to a string

export default NextAuth({
providers: [
    GoogleProvider({
        clientId: process.env.GOOGLE_ID as string,
        clientSecret: process.env.GOOGLE_SECRET as string,
    }),
]})

answered Jan 17 '23 at 13:40

ilyasDev

47
3

Typescript says NextJS environment variables are undefined

3 Answers3