Sharepoint (SPFx): APIs working on workbench but on modern pages the /sitePages/ path appears

Question

I'm fairly new to the sharepoint framework so this maybe something quite fundamental that I have misunderstood but here goes:

I'm working on a sharepoint framework typescript / react webpart that uses a number of API calls which are all working on the workbench.aspx but not working when i test on sitePages using modern pages.

For example this:

import { Web, sp, SearchQuery, SearchResults, SearchQueryBuilder, Search } from '@pnp/sp';
sp.search("test").then((resultSet: SearchResults) => {
    console.log(resultSet)
});

On the workbench it works and returns my search results.

The same function on a modern page inserts /SitePages into the API call and returns a 404:

https://{server}/sites/{site}/SitePages/_api/search/postquery

I had the same problem with the currentUser web service and got round it doing this:

let spweb: Web = new Web(this.props.wpContext.pageContext.web.absoluteUrl);

spweb.currentUser.get().then(user=>{
    console.log(user);
});

This works in both workbench and modern pages but I think these are symptoms of something more fundamentally incorrect with my code.

Sorry for the lack of code shared but I'm asked not to share code by my organization.

Any tips on where I'm going wrong would be appriciated.

Answer 1

You need to provide the context/setup to the pnpjs library which then determines what URLs to use internally to fetch the data.

To do that , you need to add the below import statement in your <webpart>.ts file.

import { sp } from "@pnp/sp";

After that , you need to add the onInit method which will be executed before other lifecycle methods as below:

public onInit(): Promise<void> {

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

    // other init code may be present

    sp.setup({
      spfxContext: this.context
    });
  });
}

Once this is done, you can run the gulp tasks and upload the package again.

Reference - Getting started with PnPJS