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

[snitgaard]

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

[snitgaard]

A workaround I've found is to instead of using workbench, I append the following tag after the sharepoint site in the url:
?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js

So the url would be:
https://tenant.sharepoint.com/sites/site?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js

This is just the main page using the localhosted manifest meaning it gets the changes the same way the workbench would get it.

This also just further confirms that something is wrong internally with the way workbench and pnp communicates.

[juliemturner]

What that error says to me is that the context you passed in (i.e. your point about the workbench) isn't passing a valid context ergo this line context.pageContext.web.absoluteUrl, web is undefined. If you want to share more of your project, i.e. how you establish the sp context I can try to help you further, it may be that the way you're initializing things is timed incorrectly... otherwise I'm not sure I can help more. You might try inspecting this.context that you're passing into the sp object when you initialize pnpjs during runtime to see if there's something obvious there.

[snitgaard]

@juliemturner The thing is that it suddenly started causing issues out of nowhere. It's worked fine for several years before this, and even worked fine last week. context.pageContext.web.absoluteUrl this line specifically is not something I have written, it is part of the pnp node module file, meaning I can't change it. Also my last reply also talks about how the issue is probably within the workbench of Sharepoint, as the issue works fine in my workaround and when the solution is deployed.

Though, I am curious about this whole thing so if you can help that would be great. This is how the initial sp context is established:

public render(): void {
    const element: React.ReactElement<CatalogProps> = React.createElement(
      Catalog,
      {
        description: this.properties.description,
        webPartContext: this.context
      }
    );

    ReactDom.render(element, this.domElement);
  }

This is within the base webpart file. I have tried to console log the this.context and it shows the page context being filled etc within this initialization. Since I'm creating the element Catalog, I'm passing the context to that class in the form of a prop.

In the catalog class, I then further use the connection from the base component to create a class containing all the API calls:
this.pnpHelper = new PnPHelper(this.props.webPartContext);

This "PnPHelper" class is basically all my CRUD functions. In here I do the following:

    constructor(wpContext: any) {
        this.webPartContext = wpContext;
        sp.setup({
            sp: {
                headers: {
                    "Accept": "application/json; odata=verbose",
                    "ContentType": "application/json; odata=verbose"
                }
            },
            // set ie 11 mode
            ie11: true,
            spfxContext: wpContext,
            defaultCachingStore: "local",
        });
        this.webPartContext = wpContext;
}

This is to further use the context established.

Hopefully this helps give some sort of overview

[juliemturner]

context.pageContext.web.absoluteUrl line from PnPjs references SPFx this.context, so what I'm implying is the library has no control over it either, it's something you're passing in when you establish context for the sp object. What I'm suggesting is somehow when you pass spfxContex: wpContext to the sp.setup command it's likely that wpContext is undefined/null. I've seen that before when there's a timing issue or a page refresh, although never specifically on the workbench.

Normally in v2 since the sp object is global, I personally initialize the sp object in a in the root .ts file for the SPFx solution and did it in the onInit method, not in a separate class. So, I would have done the following:

protected async onInit(): Promise<void> {
    try {
      // Initialize PnPjs (simple way)
      let ie11Mode: boolean = (!!window.MSInputMethodContext && !!document["documentMode"]);
      sp.setup({ ie11: ie11Mode, spfxContext: this.context });

      // Initialize PnPjs (modify headers, etc)
      sp.setup({
            sp: {
                headers: {
                    "Accept": "application/json; odata=verbose",
                    "ContentType": "application/json; odata=verbose"
                }
            },
            // set ie 11 mode
            ie11: true,
            spfxContext: this.context,
            defaultCachingStore: "local",
        });
    } catch (err) {
      console.error("onInit", err);
    }
  }

You can still have your PnPHelper class, I encourage services like that is it abstracts away the logic for the data layer for the UI but you won't need to pass the context to it, you'll just use the sp object as it's already initialized, you just need to import it into that class file.

If you follow this guidance, then to your other question, there should be no reason whatsoever to send the context to your root react component.

[snitgaard]

I tried your setup and the workbench acted the exact same way as before, with the site crashing if I try to enter "Preview" mode.

I think the solution of just using the base site with a navigation URL to the manifest is the way to go, as it doesn't isolate the experience and you don't run into some common design issues either. I still believe the issue is in the communication between Workbench and the version of pnp I'm using, as I mentioned, this started happening out of nowhere and to all my applications running the same configuration setup.

Though I still appreciate you taking your time to try and help me find a solution, I dont believe this question was completely answered as your answer did not work either.

[skfoday]

I am having the a similar problem, my pnp version is "@pnp/sp": "^4.1.0",. I can get data from sharepoint but I can't add data in to sharepoint. I get the same error "TypeError: Cannot read properties of undefined (reading 'web')".

[juliemturner]

I have just tested to verify but cannot replicate the issue. My solution will both get and update data using PnPjs on the hosted (https://mytenant.sharepoint.com/sites/mysite/_layouts/15/workbench.aspx) workbench. If you're getting an error then it is related to your code or tenant, and sadly without a complete reproduction of your issue I cannot help more than that.