Problem with connecting SPFX webpart to SharePoint via PnP Js
-
16-02-2021 - |
سؤال
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.
المحلول
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.
نصائح أخرى
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?