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

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';"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:


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.