I followed Microsoft's instructions for building my first hello world web part for sharepoint 2019 found here and here. Everything has worked up until the "To get access to the page context" section of part 2
I pasted the code and save the files and my gulp is giving the following errors:
Does anyone have an idea why this is happening? When I hover my mouse over the errors in VS code it shows this: errors
I also tried the next part in the tutorial which is "Retrieve lists from SharePoint site" and I get a problem with the return statement in the function:error
I see others online following the same exact tutorial with the same exact code, yet theirs does not throw these errors. My guess is because I am using such old versions to work with SharePoint 2019? For instance, as instructed by Microsoft, in order to develop web parts for SharePoint 2019 I had to get SharePoint Framework v1.4.1 and I am also using node version 8.17.0.
I will paste my entire HelloWorldWebPart.ts file here:
import { Version } from '@microsoft/sp-core-library';
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
PropertyPaneTextField,
PropertyPaneCheckbox,
PropertyPaneDropdown,
PropertyPaneToggle
} from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';
import styles from './HelloWorldWebPart.module.scss';
import * as strings from 'HelloWorldWebPartStrings';
import {
SPHttpClient,
SPHttpClientResponse
} from '@microsoft/sp-http';
export interface IHelloWorldWebPartProps {
description: string;
test: string;
test1: boolean;
test2: string;
test3: boolean;
}
export interface ISPLists {
value: ISPList[];
}
export interface ISPList {
Title: string;
Id: string;
}
export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
public render(): void {
this.domElement.innerHTML = `
<section class="${styles.helloWorld} ${!!this.context.sdks.microsoftTeams ? styles.teams : ''}">
<div class="${styles.welcome}">
<img alt="" src="${this._isDarkTheme ? require('./assets/welcome-dark.png') : require('./assets/welcome-light.png')}" class="${styles.welcomeImage}" />
<h2>Well done, ${escape(this.context.pageContext.user.displayName)}!</h2>
<div>${this._environmentMessage}</div>
</div>
<div>
<h3>Welcome to SharePoint Framework!</h3>
<div>Web part description: <strong>${escape(this.properties.description)}</strong></div>
<div>Web part test: <strong>${escape(this.properties.test)}</strong></div>
<div>Loading from: <strong>${escape(this.context.pageContext.web.title)}</strong></div>
</div>
</section>`;
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('description', {
label: 'Description'
}),
PropertyPaneTextField('test', {
label: 'Multi-line Text Field',
multiline: true
}),
PropertyPaneCheckbox('test1', {
text: 'Checkbox'
}),
PropertyPaneDropdown('test2', {
label: 'Dropdown',
options: [
{ key: '1', text: 'One' },
{ key: '2', text: 'Two' },
{ key: '3', text: 'Three' },
{ key: '4', text: 'Four' }
]}),
PropertyPaneToggle('test3', {
label: 'Toggle',
onText: 'On',
offText: 'Off'
})
]
}
]
}
]
};
}
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(() => {});
}
}