Unable to List All SharePoint Online Lists Using SharePoint SPFX Framework

ChiranthakaJ 0 Reputation points
2023-05-28T06:00:52.9033333+00:00

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

SharePoint Development
SharePoint Development
SharePoint: A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.Development: The process of researching, productizing, and refining new or existing technologies.
2,796 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. ChengFeng - MSFT 5,020 Reputation points Microsoft Vendor
    2023-05-29T07:52:22.4166667+00:00

    Hi @ChiranthakaJ

    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

    User's image

    modify it like this:

    export interface ISPLists {
         value: ISPList[];
    }
    
    
    

    This official document:

    User's image

    Here is my test code:

    User's image

    User's image

    Here is test result:

    User's image



    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