1

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:

enter image description here

Here is how the webpart looks like, just a basic one: enter image description here

When I click on the "Test PnP Connection" button I get these two errors: enter image description here

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.

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.

1

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?

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.