Error - [tsc] src/extensions/topBarNavigation/TopBarNavigationApplicationCustomizer.ts(66,111): erro

New Contributor

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 {
} 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 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;

public onInit(): Promise<void> {, `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(
{ 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.");

const elem: React.ReactElement<IReactHeaderProps> = React.createElement(ContextualMenuSubmenuExample, this);
ReactDOM.render(elem, this._topPlaceholder.domElement);



[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

1 Reply
the same code runs on my colleague machine without any issues..