Context issue when adding webpart to different SharePoint pages

[christopher-walker]

Category

• Enhancement
• Bug
• Question
• Documentation gap/issue

Version

Please specify what version of the library you are using: ["@pnp/sp": "^1.2.9"]

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

Using the latest release

Observed Behavior

I am using the tool to create a "Modern Team Site" this worked fine in the workbench (on the SP tenant: /_layouts/15/workbench.aspx) however once I deployed it and added it to the homepage I got an error:

Uncaught (in promise) Error: Error making HttpClient request in queryable [404]

This was using the page https://.sharepoint.com/sites/

I then tried creating a separate site page to see if the same thing happened this page had the url:
https://.sharepoint.com/sites//SitePages/Create-Site-SPFx.aspx

Same issue

Eventually I tried the following url:
https://.sharepoint.com/sites//

(with a slash at the end)

and the webpart worked as expected. however on removing the trailing slash it failed again

Steps to Reproduce

Create a webpart that creates a modern team site.
Ensure this works in the workbench
Apply this webpart to the homepage of a site without a trailing slash (or a site page with or without a trailing slash)

Thanks

Chris

[koltyakov]

Looks like a simple misconfiguration, did you provide SPFx context as described in the docs?

[christopher-walker]

Hi,
Thanks for the quick response ... initially I did not include the context in the webpart. However I did then look back at the getting started guide and added this at the top of my webpart:
import { sp, Site } from "@pnp/sp";
Then this in the first line of my class:
` public onInit(): Promise {

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

  // other init code may be present
  sp.setup({
    spfxContext: this.context
  });
});

}`

I am starting to wonder if i need to pass something additional down to my react element:

const element: React.ReactElement<ICreateSiteProps > = React.createElement( CreateSite, { context: this.context, description: this.properties.description } );

[koltyakov]

Hi @christopher-walker,

It's better not to pass the whole context as a React component property. The good article on this topic by @waldekmastykarz.

sp.setup is a global thing. It can be placed on the top level once.

However, in situations when a number of SPFx webparts or customizers with PnPjs could be potentially added to a page and if they could have different base URLs for some reasons, it's also possible to pass a bare minimal part of the context, siteAbsoluteUrl for instance, and use PnPjs's objects local explicit creation:

import { Web } from '@pnp/sp';
const web = new Web('[WEB_ABS_URL]');

[christopher-walker]

Thanks for the tips Andrew,

I passed in the Url of the site to the react component rather than the entire context then instantiated the Site object inside the component.

so instead of calling the context:

sp.site.createModernTeamSite()

I now have:

var hubSite = new Site("<SiteUrl>");
hubSite.createModernTeamSite();

Once again thanks 👍

[github-actions]

This issue is locked for inactivity or age. If you have a related issue please open a new issue and reference this one. Closed issues are not tracked.