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

[alXDraghiciu]

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]

• [x] 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]