1

I'm using this tutorial to create a webpart using spfx and sp/pnp v3: https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/use-sp-pnp-js-with-spfx-web-parts I've also referred to: https://pnp.github.io/pnpjs/getting-started/ Here is the root .ts file:

public async onInit(): Promise<void> {
    await super.onInit();
    getSP(this.context);
  }

Here is the parent component:

import { getSP } from "../components/pnpjsConfig";
import { SPFI, spfi } from "@pnp/sp";

let sp: SPFI;

sp = getSP();

const GetAssessments = async () => {
 
  const allItems = await sp.web.lists.getByTitle("MyList").items.select(`*, Author/Id,
  CompletedBy/UserName, CompletedBy/Title, CompletedBy/Id, 
  BURepresentative/UserName, BURepresentative/Title, BURepresentative/Id
  `).expand('Author, CompletedBy, BURepresentative')().then(r => {
    const returnedAssessment: IListItem[] = r.map((item) => {
      return { 
        Id: item.Id,
        FormStatus: item.FormStatus,
        CurrentStatus: item.CurrentStatus,
        CompletedById: item.CompletedById,
        AuthorId: item.AuthorId,
        BURepresentativeId: item.BURepresentativeId,
      };
    });
    return returnedAssessment;
  });
  let sortedAssessment = allItems.sort((a, b) => a.Id < b.Id ? 1 : -1);
  return sortedAssessment;
};

But I'm getting:

TypeError: Cannot read properties of undefined (reading 'pageContext')

When gulp serve --nobrowser.

Need help.

NightTom
  • 418
  • 15
  • 37

1 Answers1

0

There's a difference between v2 and v3 in how you import the packages. In v3 you need to explicitly import the packages you need.

For example

import "@pnp/sp";
import "@pnp/sp/webs"; 
import "@pnp/sp/lists";
import "@pnp/sp/webs";

Try adding the imports that you need.

For more information: https://pnp.github.io/pnpjs/concepts/selective-imports/

Magdalena Fernlund
  • 13
  • 3