Argument of type '"blob"' is not assignable to parameter of type 'ResponseType' in SPFX project

Start with the responseType("blob") call in src/webparts/helloWorld/HelloWorldWebPart.ts and inspect the @microsoft/sp-http 1.18.2 types used by MSGraphClientV3. Run gulp serve to reproduce the TypeScript error; done means the blob response type is accepted and the sample builds successfully.

Bug Report

Hello, I've created a new web part in my SPFX project and my SPFX package version was upgraded from 1.17 to 1.18 automatically by the creation wizard.

This seem to have brought a breaking change with existing Microsoft Graph code used in the project.

Prerequisites

• Can you reproduce the problem?
• Are you running the latest version?
• Are you reporting to the correct repository?
• Did you perform a cursory search?

For more information, see the CONTRIBUTING guide.

Description

Here is my code:

  private async _getUserProfilePicture(): Promise<HTMLImageElement | void> {
    return await this.context.msGraphClientFactory.getClient('3').then(
      async (graphclient: MSGraphClientV3) => {
        return await graphclient
          .api('/me/photo/$value')
          .responseType("blob")
          .get()
          // eslint-disable-next-line @typescript-eslint/no-explicit-any
          .then((blob: Blob): Promise<any> => {
            // eslint-disable-next-line no-async-promise-executor
            return new Promise(async (resolve, reject) => {
              const b64 = await blobToBase64(blob);
              const img = new Image();
              img.src = b64;
              this.properties.hasProfilePicture = true;
              return resolve(img);
            });
          })
          .catch((e) => {
            // ...
          });
      });

And the IDE error:
Argument of type '"blob"' is not assignable to parameter of type 'ResponseType'.ts(2345)

Console Errors: [Is there any console error]

Screenshots: [If applicable, add screenshots to help explain your problem]

Steps to Reproduce

1. Create a new folder and initialize a new SPFX solution:
   
   yo @microsoft/sharepoint
2. Choose WebPart for the client-side component and React for template, leave everything else default
3. Install the @microsoft/sp-http package for the MSGraphClientV3:
   
   npm i @microsoft/sp-http
4. Modify config/serve.json with your SharePoint tenant URL
5. Open up src/webparts/helloWorld/HelloWorldWebPart.ts
6. Modify the onInit method to look like this:
   

  protected async onInit(): Promise<void> {
    await this.context.msGraphClientFactory.getClient('3').then(
      async (graphclient: MSGraphClientV3) => {
        return await graphclient
          .api('/me/photo/$value')
          .responseType("blob")
          .get()
          // eslint-disable-next-line @typescript-eslint/no-explicit-any
          .then((blob: Blob): Promise<any> => {
            // eslint-disable-next-line no-async-promise-executor
            return new Promise(async (resolve, reject) => {
              return resolve(blob);
            });
          })
      });
  }

7. Run the gulp serve command
8. The build will fail:
   
   Error - [tsc] src/webparts/helloWorld/HelloWorldWebPart.ts(45,25): error TS2345: Argument of type '"blob"' is not assignable to parameter of type 'ResponseType'.

Expected behavior: [What you expected to happen]
The string "blob" to be accepted as an argument for responseType method on the GraphRequest.

Actual behavior: [What actually happened]
Cannot build because of error.

Additional Context

"@microsoft/sp-http": "^1.18.2" was installed

Usage Information

Request ID - Value of the requestId field if you are receiving a Graph API error response

SDK Version - [SDK version you are using]

• Node (Check, if using Node version of SDK)

Node Version - 18

• Browser (Check, if using Browser version of SDK)

Browser Name - [The name of Browser that you are using for SDK]

Version - [The version of the browser you are using]