SPFx Extension Application Customizer Not Displaying React Component From TSX File

Question

I am developing a SharePoint Framework Extension to display a chatbot in SharePoint. While there are Github Repos that have code for this, they are all on old versions of the framework. I am trying to create this in the latest version.

I have started small just to see if I can get the custom HTML elements to render, but I have not yet been able to get it to work. I can get custom div elements to render when I have them directly in the application customizer file, but when I try and render a react component from a separate file it does not render. I am providing the code to my files below. Any insight would be most appreciated.

node version 16.19.0 SharePoint Framework version 1.16.1

package.json

{
  "name": "eva-pva-popup-chat",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=16.13.0 <17.0.0"
  },
  "main": "lib/index.js",
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "@microsoft/decorators": "1.16.1",
    "@microsoft/sp-application-base": "1.16.1",
    "@microsoft/sp-core-library": "1.16.1",
    "@microsoft/sp-dialog": "1.16.1",
    "@microsoft/sp-office-ui-fabric-core": "^1.16.1",
    "react": "^17.0.2",
    "tslib": "2.3.1"
  },
  "devDependencies": {
    "@microsoft/eslint-config-spfx": "1.16.1",
    "@microsoft/eslint-plugin-spfx": "1.16.1",
    "@microsoft/rush-stack-compiler-4.5": "0.2.2",
    "@microsoft/sp-build-web": "1.16.1",
    "@microsoft/sp-module-interfaces": "1.16.1",
    "@rushstack/eslint-config": "2.5.1",
    "@types/webpack-env": "~1.15.2",
    "ajv": "^6.12.5",
    "gulp": "4.0.2",
    "typescript": "4.5.5"
  }
}

EvapvapopupchatApplicationCustomizer.ts

import { Log } from '@microsoft/sp-core-library';
import {
  BaseApplicationCustomizer, PlaceholderContent, PlaceholderName
} from '@microsoft/sp-application-base';
import * as React from "react";
import * as ReactDOM from "react-dom";
import evapvapopupchat, { IEvaPvaPopupChatProps } from './components/evapvapopupchat';
import * as strings from 'EvapvapopupchatApplicationCustomizerStrings';

const LOG_SOURCE: string = 'EvapvapopupchatApplicationCustomizer';

export interface IEvapvapopupchatApplicationCustomizerProperties {}

export default class EvapvapopupchatApplicationCustomizer
  extends BaseApplicationCustomizer<IEvapvapopupchatApplicationCustomizerProperties> {
  
  //private _topPlaceholder: PlaceholderContent | undefined;
  private _bottomPlaceholder: PlaceholderContent | undefined;

  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);

    this._renderPlaceHolders();
    return Promise.resolve();
  }

  private _renderPlaceHolders(): void {
    console.log("EvapvapopupchatApplicationCustomizer._renderPlaceHolders()");
    console.log(
      "Available placeholders: ",
      this.context.placeholderProvider.placeholderNames
        .map(name => PlaceholderName[name])
        .join(", ")
    );

    // Handling the bottom placeholder
    if (!this._bottomPlaceholder) {
      this._bottomPlaceholder = this.context.placeholderProvider.tryCreateContent(
        PlaceholderName.Bottom,
        { onDispose: this._onDispose }
      );

      // The extension should not assume that the expected placeholder is available.
      if (!this._bottomPlaceholder) {
        console.error("The expected placeholder (Bottom) was not found.");
        return;
      }

      //Get component from evapvapopupchat.tsx and render
      const elem: React.ReactElement<IEvaPvaPopupChatProps> =
        React.createElement(evapvapopupchat);

      ReactDOM.render(elem, this._bottomPlaceholder.domElement);
    }
  }

  private _onDispose(): void {
    console.log('[EvapvapopupchatApplicationCustomizer._onDispose] Disposed bottom placeholders.');
  }
}

/components/evapvapopupchat.tsx

import * as React from "react";
import styles from './evapvapopupchat.module.scss';

export interface IEvaPvaPopupChatProps {
    //Add properties here
}

export default class evapvapopupchat extends React.Component<IEvaPvaPopupChatProps> {
    constructor(props: IEvaPvaPopupChatProps) {
        super(props);
    }

    public render() {
        return (
            <div className={styles.botButton}>
                <p className={styles.botButtonText}>Chat with EVA</p>
            </div>
        );
    }
}

Answer 1

I had the same problem. In my case the extension name was too long and not load correctly.

If you change the extension name to a shorter one and it still doesn't work you can try this:

1. Use npm version 8.9.3 and node 16.13+ (in my case node 16.16.0)
2. Delete package-lock.json
3. Delete node_module
4. Check that all packages "@microsoft/*" in package.json have version 1.16.1
5. npm i
6. gulp serve