Unable to List All SharePoint Online Lists Using SharePoint SPFX Framework

Question

Hi All,

I'm new to SharePoint SPFX development. As I am new to SharePoint SPFx, I was trying the below Microsoft Official Tutorial Connect your client-side web part to SharePoint (Hello World part 2) .

I successfully completed Part 01 of the tutorial series, Build your first SharePoint client-side web part (Hello World part 1) 

When I'm following Part 02 I got stuck at the below 2 methods

01

  private _renderListAsync(): void {
    this._getListData()
      .then((response) => {
        this._renderList(response.value);
      })
      .catch(() => {});
  }

The error is in line 4 (response.value), which is 'Argument of type 'ISPLists[]' is not assignable to parameter of type 'ISPList[]'. Type 'ISPLists' is missing the following properties from type 'ISPList': Title, Idts(2345)'

Also in the same method line 6 (.catch(() => {});), which is 'Unexpected empty arrow function.eslint@typescript-eslint/no-empty-function'

02

private _getListData(): Promise<ISPLists> {
    return this.context.spHttpClient.get(`${this.context.pageContext.web.absoluteUrl}/_api/web/lists?$filter=Hidden eq false`, SPHttpClient.configurations.v1)
      .then((response: SPHttpClientResponse) => {
        return response.json();
      })
      .catch(() => {}); 
  }

The error is in line 6 (.catch(() => {});), which is Unexpected empty arrow function.eslint@typescript-eslint/no-empty-function

I tried many threads but didn't get an answer.

I'm using SharePoint Online, NodeJs 16.20.0, NPM 8.19.4 without using any front-end framework like React or Angular.

Please refer to the below link for the source code for the solution.  Source code - https://drive.google.com/drive/folders/1RccnNmjIDdqeOvUxg-cnG-byxVwuhNe8?usp=sharing

Could you please help me to solve this issue?

Best regards, ChiranthakaJ

Answer 1

Hi @Chiranthaka Jayakody ，

The reason for the error is that in the ISPLists interface, the type of the value attribute is defined as ISPLists[]. 

This would result in a recursive reference because the ISPLists interface itself has a property named value whose type is also ISPLists[].

Please follow the official documentation to replace this part of your code with

modify it like this：

export interface ISPLists {
     value: ISPList[];
}

This official document:

Here is my test code:

Here is test result:

---

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best Regards

Cheng Feng