Pnpjs: pnp.sp.utility.expandGroupsToPrincipals only works in Workbench due to URL parsing issue

[clayo]

Thank you for reporting an issue, suggesting an enhancement, or asking a question. We appreciate your feedback - to help the team understand your
needs please complete the below template to ensure we have the details to help. Thanks!

Please check out the Docs to see if your question is already addressed there. This will help us ensure our documentation covers the most frequent questions.

Category

• [ ] Enhancement
• [x] Bug
• [ ] Question
• [ ] Documentation gap/issue

Version

Please specify what version of the library you are using: [ 2.0.0 ]

Please specify what version(s) of SharePoint you are targeting: [ SharePoint Online ]

If you are not using the latest release, please update and see if the issue is resolved before submitting an issue.

Expected / Desired Behavior / Question

If you are reporting an issue please describe the expected behavior. If you are suggesting an enhancement please
describe thoroughly the enhancement, how it can be achieved, and expected benefit. If you are asking a question, ask away!

Using the function pnp.sp.utility.expandGroupsToPrincipals should make the proper backend RESTful call to the appropriate _api endpoint in SharePoint both from the workbench and when deployed to a page.

Observed Behavior

If you are reporting an issue please describe the behavior you expected to occur when performing the action. If you are making a
suggestion or asking a question delete this section.

Using pnp.sp.utility.expandGroupsToPrincipals in an SPfx webpart only works in the SharePoint workbench. When using this function it properly makes a call to:
https://[tenant].sharepoint.com/sites/[yoursite]/_api/SP.Utilities.Utility.ExpandGroupsToPrincipals
However, if you deploy the webpart and put it on a page, the call then incorrectly tries to hit the non-existent API URL of:
https://[tenant].sharepoint.com/sites/[yoursite]/SitePages/_api/SP.Utilities.Utility.ExpandGroupsToPrincipals

The SitePages is the issue. It doesn't parse this out from the current page you're on and get the URL of the current Web. The call then fails with a 404.

Steps to Reproduce

If you are reporting an issue please describe the steps to reproduce the bug in sufficient detail to allow testing. If you are making
a suggestion or asking a question delete this section.

Deploy the SPfx webpart to the AppCatalog and put the webpart on a page. Then it happens.

[koltyakov]

Are you establishing SPFx context?

[clayo]

Are you establishing SPFx context?

Assuming I'm using the correct one out of the many on that page, I am now. Same result. All other graph and pnp calls I've been using have been functioning just fine before adding one of those context calls, however.

import { setup as pnpSetup } from "@pnp/common";

// ...

protected onInit(): Promise {

return super.onInit().then(_ => {

// other init code may be present

pnpSetup({
  spfxContext: this.context
});

});
}

// ...

Here's my little snippet of code where I'm using it:

    let emailTo: string[] = this.peoplePickerCntl.state.selectedPersons.map((props) => props.text);
    pnp.sp.utility.expandGroupsToPrincipals(emailTo).then((principals: PrincipalInfo[]) => {
      emailTo = principals.map((props) => props.Email);
    });

[clayo]

Got it to work. I had sp-pnp-js installed too, which I believe is where the bug was actually coming from. Once I removed that and installed @pnp/sp instead, it now works as expected.