0

I have a webpart, which works on my localhost fine, i can read items from List "A", and can write items in List "B".

I deploy it on my site collection, so I add the sppkg file in Admin Center to the apps, I can activate the app on the site, and I find it on my Wep-Part list. I add the the site, but the Choice Field does not get the data from List "A" (not like in localhost). The console displays many errors, but some on is very interested:

GET https://helloworld.sharepoint.com/teams/Test/SitePages/_api/web/lists/getByTitle('A')/items?$select=Title,Member 404

the list "A" - on this link - is not available, ths SPO means, it does not exist. The right link is:

https://helloworld.sharepoint.com/teams/Test/_api/web/lists/getByTitle('A')/items?$select=Title,Member.

the last link gives me the xml Code from the List "A". But the first one gives me below:

Hmmm...this page is unfortunately not available

Here is my Typescript Code:

  private getListItems = async () => {
   const listItems = await pnp.sp.web.lists.getByTitle('A').items.select('Title','Member').get();
   return listItems;

};

I tried that too:

import { sp } from "@pnp/sp/presets/all";  

  private getListItems = async () => {
   const listItems = await sp.web.lists.getByTitle('A').items.select('Title','Member').get();
   return listItems;
};

and that too:

private getListItems = async () => {
  (async () => { 
  const listName = "A";
  
  const listItems = await sp.web.lists.getByTitle(listName).items.select('Title','Member').get();
  console.table(listItems);
})().catch(console.log)

};

but nothing works...

I do after any changes the commands:

gulp build

gulp bundle --ship

gulp package-solution --ship

And I upload agein the sppkg file to the Admin Center. I refresh the app on the Site collection, but it does not help.

Has anyone some solution? Thank You!

2 Answers 2

0

You have to supply web part context to PnP JS library while using it within SPFx.

Example:

import pnp from "sp-pnp-js";

// ...

public onInit(): Promise<void> {

  return super.onInit().then(_ => {

    pnp.setup({
      spfxContext: this.context
    });
    
  });
}

Sources:

  1. 404 error when generating REST queries
  2. Using sp pnp js in SharePoint Framework

In case you are using latest version of PnP JS, check this: PnP JS - Getting Started with SharePoint Framework

1

Can you check if you have initialize/setup SP context properly?

Refer below code. You can add this code in constructor in your webpart.ts file. This should solve your problem.

constructor(props: IMyProps) {
   super(props);
   sp.setup({ spfxContext: this.props.spcontext });
 }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.