Error - [tsc] src/extensions/topBarNavigation/TopBarNavigationApplicationCustomizer.ts(66,111): erro
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