Invalid type "string | undefined" of template literal expression in React/TypeScript-CodePudding

I'm testing whether a POST method is being called upon submission:

process.env.NEXT_PUBLIC_API_URL = 'http://localhost:3000/';


it('should make a POST request when called', async () => {
    await contactProxy(defaultRequest, response);

    expect(global.fetch).toHaveBeenCalledWith(
        //underlined with a warning
        `${process.env.NEXT_PUBLIC_API_URL}tenants/v1/${locale}/inquiries`,
        {
            method: 'POST',
            headers: getDefaultHeaders(),
            body: JSON.stringify(defaultRequest.body)
        }
    );
});

but process.env.NEXT_PUBLIC_API_URL is underlined with Invalid type "string | undefined" of template literal expression in React/TypeScript

Casting

process.env.NEXT_PUBLIC_API_URL = 'http://localhost:3000/' as string;

doesn't solve it

CodePudding user response：

The environments from process.env are all defined as string | undefined.

In order to fix this, you have to extract the environment in a variable and type check on it

process.env.NEXT_PUBLIC_API_URL = 'http://localhost:3000/';


it('should make a POST request when called', async () => {
    await contactProxy(defaultRequest, response);

    const NEXT_PUBLIC_API_URL = process.env.NEXT_PUBLIC_API_URL;

    if(NEXT_PUBLIC_API_URL) {
      expect(global.fetch).toHaveBeenCalledWith(
        `${NEXT_PUBLIC_API_URL}tenants/v1/${locale}/inquiries`,
        {
            method: 'POST',
            headers: getDefaultHeaders(),
            body: JSON.stringify(defaultRequest.body)
        }
      );
    }
});

CodePudding user response：

In TypeScript, the type of the process.env object is { [key: string]: string | undefined }, which means that the type of each property of the process.env object is either string or undefined. This means that the type of the process.env.NEXT_PUBLIC_API_URL property is string | undefined, which is causing the error you are seeing.

To fix this error, you can use a type assertion to tell TypeScript that the process.env.NEXT_PUBLIC_API_URL property is definitely a string, or you can use the as string type assertion syntax. Here is an example of how you could use a type assertion to fix the error:

// Use a type assertion to tell TypeScript that the
// NEXT_PUBLIC_API_URL property is definitely a string
process.env.NEXT_PUBLIC_API_URL = 'http://localhost:3000/' as string;

it('should make a POST request when called', async () => {
  await contactProxy(defaultRequest, response);

  expect(global.fetch).toHaveBeenCalledWith(
    // No more error because TypeScript now knows that
    // NEXT_PUBLIC_API_URL is definitely a string
    `${process.env.NEXT_PUBLIC_API_URL}tenants/v1/${locale}/inquiries`,
    {
      method: 'POST',
      headers: getDefaultHeaders(),
      body: JSON.stringify(defaultRequest.body)
    }
  );
});

CodePudding user response：

Try adding not null assertion to env variable, like so:

${process.env.NEXT_PUBLIC_API_URL!}tenants/v1/${locale}/inquiries

CodePudding user response：

This happens because environment variables are string|undefined. This means that you have to make sure that it's string before you pass it further with something like:

const NEXT_PUBLIC_API_URL = process.env.NEXT_PUBLIC_API_URL;
if(NEXT_PUBLIC_API_URL === undefined){
...
}

I will shamelessly plug an alternative, which would be using a package I have made for getting environment variables easier: https://www.npmjs.com/package/get-env-variable?activeTab=readme

It either grabs the env variable, subsidies it if desired, or throws an error if neither default value, nor env variable was found.