Problem with connecting SPFX webpart to SharePoint via PnP Js

Question

i am again sitting and want to experiment more with SPFX webparts and PnP Js but I am facing problems when I try to use PnP in my code connecting to SharePoint. I am facing the problem when I create a new SPFX webpart but not when I am using an old webpart which looks similar to the new ones.

Here I tested something basic which even that does not work and gives the same error in the console.

This is the error I get when the SPFX webpart is loaded, which I don't know have anything with my issue to do:

Here is how the webpart looks like, just a basic one:

When I click on the "Test PnP Connection" button I get these two errors:

I don't understand why I get this error. Here I will show my code:

CoronaTulip.tsx:

import * as React from 'react';
import styles from './CoronaTulip.module.scss';
import { ICoronaTulipProps } from './ICoronaTulipProps';
import CoronaTulipForm from './CoronaTulipForm';

export default class CoronaTulip extends React.Component<ICoronaTulipProps, {}> {
  public render(): React.ReactElement<ICoronaTulipProps> {
    return (
      <div className={ styles.coronaTulip }>
        <div className={ styles.container }>
          <div className={ styles.row }>
            <div className={ styles.column }>
              <span className={ styles.title }>PnP Testing</span>
              <CoronaTulipForm description="blabla"/>
            </div>
          </div>
        </div>
      </div>
    );
  }
} 

CoronaTulipForm.tsx:

import * as React from 'react';
import { ICoronaTulipProps } from './ICoronaTulipProps';
import { sp } from '@pnp/sp';
import "@pnp/sp/webs";

export default class CoronaTulipForm extends React.Component<ICoronaTulipProps, {}> {
    constructor(props) {
        super(props);
    };
    
    private async getListItems() {
        console.log("Method working");
        
        const w = await  sp.web.select("Title")();
        console.log(`Web Title: ${w.Title}`);
    }
    
    public render(){
        return(
            <div>
                <button onClick={this.getListItems}>Test PnP Connection</button>
            </div>
        )
    }
}
 

I get this problem with every new SPFX webpart I create. I have done everything as they say in the PnP Js Library. The code I have provided here is the only codes that I have changed in, others I have not touched. All help and advice is appreciated on how I should go forward with the issue.

Thank you very much in advance.

Answer 1

In your base webpart class, add the following code:

export default class YOUR_WEB_PART extends BaseClientSideWebPart<IMigrationDashboardWebPartProps> {

  public onInit(): Promise<void> {
    return super.onInit().then(_ => {
      //  to make sure that REST calls are send to the correct relative URL:
      sp.setup({
        spfxContext: this.context
      });
    });
  }

without sp.setup({spfxContext: this.context });, REST calls will be sent to a wrong location when you are going to use the hosted workbench.

Answer 2

Kelank,

Try calling the setup method once in your web part. It would look something like this:

sp.setup({
  sp: {
    headers: {
      Accept: "application/json;odata=verbose",
    }
  }
});

You can find out more at: PnP/PnPJS - Getting Started

I hope this helps?