Breaking change in 1.18 -> Argument of type '"blob"' is not assignable to parameter of type 'ResponseType'

[alXDraghiciu]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• SPFX 1.18.2
• Node 18.17.1

Describe the bug / error

Cannot use MSGraphClientV3. The responseType function does not recognize strings (i.e. blob) as valid arguments, expecting a ResponseType type argument instead. This was not an issue in the previous version (1.17).

Example:

 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 build produces this error:

Argument of type '"blob"' is not assignable to parameter of type 'ResponseType'.ts(2345)

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

The build to succeed.