SharePoint

SPFx Application Customizer Error: Failed to Load Component

In this blog, we will discuss a SPFx app customizer issue that I have faced during development.

Have you ever faced any error like below 

" Could not load header-application-customizer in require.

TypeError: Cannot read properties of undefined (reading 'id')

Failed to create application customizer

ClientSideExtension.ApplicationCustomizer.b3342123-f9cc-442a-836a-b6e566acbcfc

Error information is 'Extension failed to load for componentId .. "

Header

As shown in above image i got this and got confused that how it is possile while i have just build app-customizer and without any major changes it gave me this error.

Scenarios which i used for solving it is below.

First check that YOUR_WEBPART_manifest.json file has id field which must be same in serve.json file like below 

"serveConfigurations": {
    "default": {
      "pageUrl": "yoursitepageURL",
      "customActions": {
        "YOUR_COMPONENT_ID": {
          "location": "ClientSideExtension.ApplicationCustomizer",
          "properties": {
            "Top": "Top area of the page",
            "Bottom": "Bottom area of the page"
          }
        }
      }
    },
    "header": {
      "pageUrl": "yoursitepageURL",
      "customActions": {
        "YOUR_COMPONENT_ID": {
          "location": "ClientSideExtension.ApplicationCustomizer",
          "properties": {
            "Top": "Top area of the page",
            "Bottom": "Bottom area of the page"
          }
        }
      }
    }
  }

As shown in above code snipet that there is YOUR_COMPONENT_ID is given which must be match to your manifest id.

Some times it happens that you are using incorrect workbench like _layouts/15/workbench.aspx which does not react exactly like site.

So i prefer use url like https://your-tenant/sites/YOURSITE/SitePages/YOURPAGENAME.aspx this. which would be great to avoid unpredictable error.

Debug Check list 

1. Match manifest.json id exact same in serve.json to connect with proper location.

2. Give a proper page URL to render.

3. Check if there is no corrupt node_modules or caches. If there is, then run the following commands.

rm -rf node_modules package-lock.json
npm install
gulp clean
gulp build

In this blog we have seen some solution regarding app-customizer development in SPFx. those are the most prefered solutions. if you are still facing any issue then follow below links :

Build your first app customizer: https://learn.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/build-a-hello-world-extension

App customizer with custom header place-holder: https://learn.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions
Membership not found