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.