Unable to add custom SPFX webpart to page - InstanceId=NULL

Martin K 0 Reputation points
2025-04-30T15:38:28.83+00:00

Hi - it seems that I'm suddenly no longer able to add (a new) custom spfx webpart to a Webpart-Page.

Everything worked fine - until yesterday, then suddenly I was no longer able to add my deployed webparts to pages. I didn't change the workflow/approach at all.

I updated my tooling and for testing created an empty helloworld webpart - which also fails to be added.

I'm a bit lost in my analysis:

My test/helloworld is created by:

  • yeoman builder
    • Changes to config files:
      • change the workbench url
    • Not using the Office365 CDN
  • test with gulp serve - working
  • gulp (clean, build, bundle, package-solution) with --ship
  • add the sppkg to the app catalog
  • add the app to the site
  • create a new web-part page
  • add the webpart

Node: 22.15.0
Yeoman: 5.1.0
SharePoint generator: 1.21

The message:
User's image

When checking with F12 dev tools - this is the line throwing the exception:

(sp-classic-page-assembly_en-us_2681aab6aa000fe97c9d883ef5d63499.js)User's image

When checking and comparing with working webparts (also self developed; but with older tooling versions) the parameters/objects in this function do look more "complete".

With the faulty webpart - the "InstanceId" - is NULL and some other objects/properties (seem to be containing some webpart info in json/xml format) are also missing some information.

Additional observations/checks I did:

  • The spkg looks to be complete - containing all expected files
  • After adding the sppkg to the app cataloge, the /ClientAssets folder contains the all assets (with the folder name matching the solution-id)
  • I downloaded/unzipped & compared the non-working "helloWorld" - with some older/working sppkg's - they look similar/complete

All Info I found suggests that there is something off with my manifest file - but it is practically unchanged from the yeoman generation:

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
  "id": "cb7d8c0c-fc0e-41da-a721-63b94415d5c3",
  "alias": "SpoTestWebPart",
  "componentType": "WebPart",
  // The "*" signifies that the version should be taken from the package.json
  "version": "*",
  "manifestVersion": 2,
  // If true, the component can only be installed on sites where Custom Script is allowed.
  // Components that allow authors to embed arbitrary script code should set this to true.
  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
  "requiresCustomScript": false,
  "supportedHosts": ["SharePointWebPart"], //, "TeamsPersonalApp", "TeamsTab", "SharePointFullPage"],
  "supportsThemeVariants": false,
  "preconfiguredEntries": [{
    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Advanced
    "group": { "default": "Advanced" },
    "title": { "default": "spoTest" },
    "description": { "default": "spoTest description" },
    "officeFabricIconFontName": "Page",
    "properties": {
      "description": "spoTest"
    }
  }]
}

Thanks in advance - I really hope someone can help me out here.

Martin

SharePoint Development
SharePoint Development
SharePoint: A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.Development: The process of researching, productizing, and refining new or existing technologies.
3,583 questions
0 comments No comments
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.