Can someone please explain what the block of code below is used for in SPFx?

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

This is the required step while using SP PnP JS module in SPFx solution.

Using this code, you set the SPFx context within the SP PnP JS library.

Because SharePoint Framework provides a local context to each component we need to set that context within the library. This allows us to determine request urls as well as use the SPFx HttpGraphClient within @pnp/graph.

The setup is always done in the onInit method to ensure it runs before your other life-cycle code.

Using @pnp/sp setup

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

// ...
protected onInit(): Promise<void> {
  return super.onInit().then(_ => {
    // other init code may be present
      spfxContext: this.context

// ...

Source: PnP JS - Getting Started

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.