SPFx Loading Multiple Extensions in One Package

Question

I have been unable to build a SPFx package with multiple application customizer extensions to load. No matter what I do, I can only get the first extension I created to load from the app catalog. I can get the second extension to load from localhost by targeting the ID in the query string parameter so I know it is working.

There are two extensions, ext1 and ext0002.

I've updated the config.json, ClientSideInstance.xml, and elements.xml files. I've updated the version number. What am I missing? Can I have two application customizer extensions in the same package.

config.json

  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
  "version": "2.0",
  "bundles": {
    "ext-1-application-customizer": {
      "components": [
        {
          "entrypoint": "./lib/extensions/ext1/Ext1ApplicationCustomizer.js",
          "manifest": "./src/extensions/ext1/Ext1ApplicationCustomizer.manifest.json"
        }
      ]
    },
    "ext-0002-application-customizer": {
      "components": [
        {
          "entrypoint": "./lib/extensions/ext0002/Ext0002ApplicationCustomizer.js",
          "manifest": "./src/extensions/ext0002/Ext0002ApplicationCustomizer.manifest.json"
        }
      ]
    }
  },
  "externals": {},
  "localizedResources": {
    "Ext1ApplicationCustomizerStrings": "lib/extensions/ext1/loc/{locale}.js",
    "Ext0002ApplicationCustomizerStrings": "lib/extensions/ext0002/loc/{locale}.js"
  }
}

ClientSideInstance.xml

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <ClientSideComponentInstance
        Title="Ext1"
        Location="ClientSideExtension.ApplicationCustomizer"
        ComponentId="b475345a-0c8e-4fb4-a573-ebd8f2afa93b"
        Properties="{&quot;testMessage&quot;:&quot;Test message&quot;}">
    </ClientSideComponentInstance>
    <ClientSideComponentInstance
        Title="Ext0002"
        Location="ClientSideExtension.ApplicationCustomizer"
        ComponentId="ec173c11-b50f-44a0-bd4a-2a0fee895278"
        Properties="{&quot;testMessage&quot;:&quot;Test message&quot;}">
    </ClientSideComponentInstance>
</Elements>

elements.xml

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <CustomAction
        Title="Ext1"
        Location="ClientSideExtension.ApplicationCustomizer"
        ClientSideComponentId="b475345a-0c8e-4fb4-a573-ebd8f2afa93b"
        ClientSideComponentProperties="{&quot;testMessage&quot;:&quot;Test message&quot;}">
    </CustomAction>
    <CustomAction
        Title="Ext0002"
        Location="ClientSideExtension.ApplicationCustomizer"
        ClientSideComponentId="ec173c11-b50f-44a0-bd4a-2a0fee895278"
        ClientSideComponentProperties="{&quot;testMessage&quot;:&quot;Test message&quot;}">
    </CustomAction>
</Elements>

Ext1ApplicationCustomizer.manifest.json

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-extension-manifest.schema.json",

  "id": "b475345a-0c8e-4fb4-a573-ebd8f2afa93b",
  "alias": "Ext1ApplicationCustomizer",
  "componentType": "Extension",
  "extensionType": "ApplicationCustomizer",
  "version": "*",
  "manifestVersion": 2,
  "requiresCustomScript": false
}

Ext0002ApplicationCustomizer.manifest.json

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-extension-manifest.schema.json",

  "id": "ec173c11-b50f-44a0-bd4a-2a0fee895278",
  "alias": "Ext0002ApplicationCustomizer",
  "componentType": "Extension",
  "extensionType": "ApplicationCustomizer",
  "version": "*",
  "manifestVersion": 2,
  "requiresCustomScript": false
}

Answer 1

Instead of multiple bundles, I've been using one bundle with multiple components with no problems.

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
  "version": "2.0",
  "bundles": {
    "your-bundle-name": {
      "components": [
        {
          "entrypoint": "./lib/webparts/abc/webPart.js",
          "manifest": "./src/webparts/abc/manifest.json"
        },
        {
          "entrypoint": "./lib/webparts/xyz/webPart.js",
          "manifest": "./src/webparts/xyz/manifest.json"
        },...
      ]
    }
  },
  "externals": {},
  "localizedResources": {
    "PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js"
  }
}