Hi i'm new to sharepoint development and I'm compiling the build using gulp build for solution but getting error on second last line of code (const elem: React.ReactElement<IReactHeaderProps> = React.createElement(ContextualMenuSubmenuExample, this);).. don't know what the problem.. i installed the type sscript version 3.7.7
the code is:
import { override } from '@microsoft/decorators';
import { Log } from '@microsoft/sp-core-library';
import {
BaseApplicationCustomizer,
PlaceholderContent,
PlaceholderName
} from '@microsoft/sp-application-base';
export interface IHelloWorldApplicationCustomizerProperties {
Top: string;
Bottom: string;
}
import * as strings from 'TopBarNavigationApplicationCustomizerStrings';
import * as React from "react";
import * as ReactDOM from "react-dom";
import {IReactHeaderProps, ContextualMenuSubmenuExample} from './ContextualMenuSubmenuExample';
const LOG_SOURCE: string = 'TopBarNavigationApplicationCustomizer';
/**
* If your command set uses the Client SideComponentProperties JSON input,
* it will be deserialized into the BaseExtension.properties object.
* You can define an interface to describe it.
*/
export interface ITopBarNavigationApplicationCustomizerProperties {
Top: string;
Bottom: string;
}
/** A Custom Action which can be run during execution of a Client Side Application */
export default class TopBarNavigationApplicationCustomizer
extends BaseApplicationCustomizer<ITopBarNavigationApplicationCustomizerProperties> {
private _topPlaceholder: PlaceholderContent | undefined;
private _bottomPlaceholder: PlaceholderContent | undefined;
@override
public onInit(): Promise<void> {
Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
// Wait for the placeholders to be created (or handle them being changed) and then
// render.
this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders);
return Promise.resolve();
}
private _onDispose(): void {
console.log('[TopBarNavigationApplicationCustomizer._onDispose] Disposed custom top and bottom placeholders.');
}
private _renderPlaceHolders(): void {
// Handling the top placeholder
if (!this._topPlaceholder) {
this._topPlaceholder = this.context.placeholderProvider.tryCreateContent(
PlaceholderName.Top,
{ onDispose: this._onDispose }
);
// The extension should not assume that the expected placeholder is available.
if (!this._topPlaceholder) {
console.error("The expected placeholder (Top) was not found.");
return;
}
const elem: React.ReactElement<IReactHeaderProps> = React.createElement(ContextualMenuSubmenuExample, this);
ReactDOM.render(elem, this._topPlaceholder.domElement);
}
}
}
error:
[11:42:27] Finished subtask 'sass' after 9.47 s
[11:42:27] Starting subtask 'tslint'...
[11:42:28] [tslint] tslint version: 5.12.1
[11:42:28] Starting subtask 'tsc'...
[11:42:28] [tsc] typescript version: 3.7.7
[11:42:40] Error - [tsc] src/extensions/topBarNavigation/TopBarNavigationApplicationCustomizer.ts(66,111): error TS2769: No overload matches this call.
[11:42:40] [tsc] The last overload gave the following error.
[11:42:40] [tsc] Argument of type 'this' is not assignable to parameter of type 'Attributes'.
[11:42:40] [tsc] Type 'TopBarNavigationApplicationCustomizer' has no properties in common with type 'Attributes'.
[11:42:40] Error - 'tsc' sub task errored after 12 s
exited with code 2
