I am developing an SPFx WebPart using PnPjs to upload files to a SharePoint document library.
However, when attempting to upload a file, I receive the following error:
Upload failed: TypeError: context.pageContext is undefined
Alternatively, I sometimes get a 403 error:
Upload failed: Error: Error making HttpClient request in queryable [403] ::> {"odata.error":{"code":"-2147024891, System.UnauthorizedAccessException","message":{"lang":"de-DE","value":"Access Denied."}}}
I have checked whether context.pageContext is available by logging console.log(this.context), but it seems to be undefined. I also ensured that my PnPjs instance is initialized correctly using getSP(this.context) inside onInit(), and logging console.log(this.sp) confirms that a valid PnPJS instance is created. Additionally, I verified whether my user has write permissions for the SharePoint document library, as I suspect missing permissions could be causing the issue. However, I am unsure if a lack of permissions would specifically result in context.pageContext being undefined. I tested the WebPart both in the local workbench and in the online workbench (/%5C_layouts/15/workbench.aspx), but the issue persists in both environments.
Why is context.pageContext
undefined?
ProgressReportWebPart.ts
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { IProgressReportProps } from './components/IProgressReportProps';
import ProgressReport from './components/ProgressReport';
import { getSP } from '../../pnpjsConfig';
import { SPFI } from "@pnp/sp";
export default class ProgressReportWebPart extends BaseClientSideWebPart<IProgressReportProps> {
private sp: SPFI;
public render(): void {
const element: React.ReactElement<IProgressReportProps> = React.createElement(
ProgressReport,
{
context: this.context //