SPFX App Customizer error "Extension failed to load for componentId"

Question

I am having errors when I deploy this in my tenant site but when i run it in debug mode via gulp serve the app is rendering.

this is the error:

 Uncaught (in promise) Error
    at t [as constructor]

Uncaught (in promise) Error: Failed to create application customizer 'ClientSideExtension.ApplicationCustomizer.75e06db2-212d-41f4-ad01-758e014c7b40'. Error information is 'Extension failed to load for componentId "75e06db2-212d-41f4-ad01-758e014c7b40".'.

i installed all the needed dependency and it briefly worked but when i removed the bottom placeholder customization, deployed then it didn't render anymore. I'd also like to note that when it briefly worked, it only rendered in the site contents, documents, settings it didn't render in the site pages such as my homepage and other pages i created.

I have followed the docs in building the customizer:

 private _renderPlaceHolders(): void {
    console.log("HelloWorldApplicationCustomizer._renderPlaceHolders()");
    console.log(
      "Available placeholders: ",
      this.context.placeholderProvider.placeholderNames
        .map(name => PlaceholderName[name])
        .join(", ")
    );
  
    // Handling the top placeholder
    if (!this._topPlaceholder) {
      console.log("no placeholder found");
      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;
      }
     //MORE CODE BELOW

   }
}

my package.json

{
  "name": "searchbar-ext",
  "version": "0.0.1",
  "private": true,
  "main": "lib/index.js",
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "@microsoft/decorators": "1.11.0",
    "@microsoft/sp-application-base": "1.11.0",
    "@microsoft/sp-core-library": "1.11.0",
    "@microsoft/sp-dialog": "1.11.0",
    "@microsoft/sp-http": "1.11.0",
    "@microsoft/sp-office-ui-fabric-core": "1.11.0",
    "@pnp/common": "^2.5.0",
    "@pnp/graph": "^2.5.0",
    "@pnp/logging": "^2.5.0",
    "@pnp/odata": "^2.5.0",
    "@pnp/pnpjs": "^2.0.13",
    "@pnp/sp": "^2.5.0",
    "@types/rijndael-js": "^1.0.0",
    "crypto-js": "^4.0.0",
    "dayjs": "^1.10.5",
    "dotenv": "^10.0.0",
    "dotenv-expand": "^5.1.0",
    "gulp-cli": "^2.3.0",
    "js-cookie": "^2.2.1",
    "ncrypt-js": "^2.0.0",
    "react-cookie": "^4.0.3",
    "rijndael-js": "^2.0.0"
  },
  "devDependencies": {
    "@microsoft/rush-stack-compiler-3.3": "0.3.5",
    "@microsoft/sp-build-web": "1.11.0",
    "@microsoft/sp-module-interfaces": "1.11.0",
    "@microsoft/sp-tslint-rules": "1.11.0",
    "@microsoft/sp-webpart-workbench": "1.11.0",
    "@types/js-cookie": "^2.2.6",
    "@types/react-cookies": "^0.1.0",
    "@types/webpack-env": "1.13.1",
    "ajv": "~5.2.2",
    "gulp": "3.9.1",
    "gulp-sequence": "1.0.0",
    "sass-loader": "^8.0.2",
    "spfx-uifabric-themes": "^0.8.0",
    "ts-loader": "^6.2.1"
  }
}

I would check the browser console (hit F12), maybe you have some syntax error in your code, or some error happening when loading the component? You get this message when you have any of those (you have compilation or build error for example) — Nikolay, Dec 18 '21 at 19:57
im not sure if its a syntax error it's perfectly working during gulp serve. — Page F.P.T, Dec 20 '21 at 02:24

SPFX App Customizer error "Extension failed to load for componentId"

0 Answers0