Having issues getting it to run

[devwheel]

I'm new to all this so was wanting to test out. fixed a bunch of compiler errors but can't tell why it won't show in my comm site.

[RichBurdes1]

Hey devwheel - with the roll out of the update sharepoint framework v1.4 things like onRender are getting replaced by OnInit.

IF you are getting compiler errors though you should check your environment and make sure you have all the aspects you need, as even with the spfx framework update the item will build and package only with warnings not errors.

Fixing up the code to run you'll need to replace class types to run under the 1.4 framework - eg - there are a few tutorials online for spfx application customisers - so check them too.

@override public onInit(): Promise {

console.log("onInit: Entered");

console.log("Available placeholders: ",
  this.context.placeholderProvider.placeholderNames.join(", "));

if (!this.headerPlaceholder) {
  this.headerPlaceholder = this.context.placeholderProvider.tryCreateContent(
    PlaceholderName.Top,
    {
      onDispose: this._onDispose
    });

  if (this.headerPlaceholder) {
    if (this.headerPlaceholder.domElement) {

      console.log("PageHeader placeholder is OK.");

      MegaMenuService.getMenuItems(this.context.pageContext.site.absoluteUrl)
        .then((topLevelMenus: TopLevelMenu[]) => {

          const element: React.ReactElement<IMegaMenuProps> = React.createElement(
            MegaMenu,
            {
              topLevelMenuItems: topLevelMenus
            });

          ReactDom.render(element, this.headerPlaceholder.domElement);

        })
        .catch((error: any) => {
          console.error(`Error trying to read menu items or render component : ${error.message}`);
        });

    } else {
      console.error('PageHeader placeholder has no DOM element.');
    }
  }
  else {
    console.error('PageHeader placeholder not found.');
  }

}
return Promise.resolve<void>();

}

instead of the original on render

@override public onInit(): Promise { return Promise.resolve(); }

@override public onRender(): void {

if (!this.headerPlaceholder) {
  this.headerPlaceholder = this.context.placeholders.tryAttach(
    'PageHeader',
    {
      onDispose: this._onDispose
    });

  if (this.headerPlaceholder) {
    if (this.headerPlaceholder.domElement) {

      console.log("PageHeader placeholder is OK.")

      MegaMenuService.getMenuItems(this.context.pageContext.site.absoluteUrl)
        .then((topLevelMenus: TopLevelMenu[]) => {

          const element: React.ReactElement<IMegaMenuProps> = React.createElement(
            MegaMenu,
            {
              topLevelMenuItems: topLevelMenus
            });

          ReactDom.render(element, this.headerPlaceholder.domElement);

        })
        .catch((error: any) => {
          console.error(`Error trying to read menu items or render component : ${error.message}`);
        });

    } else {
      console.error('PageHeader placeholder has no DOM element.');
    }
  }
  else {
    console.error('PageHeader placeholder not found.');
  }

}