SharePoint (Hello World part 2)

Question

Hello, I am trying to go through the tutorial "Sharepoint (Hello World part2)" located here: https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/connect-to-sharepoint. I followed all the instructions. I even ran through it 3 times to makes sure I wasn't missing anything. But when I run gulp serve I get the following. Do you know what this means?

[08:53:59] Error - [tsc] src/webparts/helloWorld/HelloWorldWebPart.ts(15,28): error TS2306: File 'C:/SharepointProjects/HelloWorld-webpart/src/webparts/helloWorld/MockHttpClient.ts' is not a module.
[08:53:59] Error - 'tsc' sub task errored after 4.94 s
exited with code 2

Answer 1

Hi @Anonymous ,
This happens because TS treats files without any imports or exports as script code, not module code. VSCode, for some reason, will indent parts of [class] code, which also might caused this issue. This was hard to notice at first, but after formatted the code and the issue disappeared. Please check the code in the MockHttpClient.ts like following and don't forget to save the MockHttpClient.ts file

import { ISPList } from './HelloWorldWebPart';  
  
export default class MockHttpClient  {  
  
  private static _items: ISPList[] = [{ Title: 'Mock List', Id: '1' },  
                                      { Title: 'Mock List 2', Id: '2' },  
                                      { Title: 'Mock List 3', Id: '3' }];  
  
  public static get(): Promise<ISPList[]> {  
    return new Promise<ISPList[]>((resolve) => {  
      resolve(MockHttpClient._items);  
    });  
  }  
}  

---

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.

---