Type ‘WebPartContext’ is not assignable to type ‘BaseComponentContext’

While working with the SharePoint Framework (SPFx) web part with the PnP Property Pane controls, particularly those that use the context property, you might see an error like this:

Type 'WebPartContext' is not assignable to type 'BaseComponentContext'.

This can happen after updating Node.js and SPFx to the latest versions. After doing some research, I found a solution that fixed the issue.

In this article, I will explain how to solve this error: Type ‘WebPartContext’ is not assignable to type ‘BaseComponentContext’.

Check out SPFx Property Pane Controls

Type ‘WebPartContext’ is not assignable to type ‘BaseComponentContext’ – Fixes

Problem: Before I updated my Node.js to version 22.17.0 and SPFx to version 1.21.1, I had no issues using the PnP Property Pane controls.

But after the update, when I tried to use the controls below, I got the issue.

• PropertyFieldListPicker control,
• PropertyFieldColumnPicker control,
• PropertyFieldFilePicker control, etc.

These controls use the context property to get data from the current site. After the update, the WebPartContext could no longer be used directly, and it displayed the error ‘WebPartContext is not assigned to the BaseComponentContext’.

Solution: On the official PnPSPFxPropertyPaneControls page, it is mentioned that if we are using the PnP controls version 3, which is based on SPFx v1.12 and above, we must cast the web part context to any type to pass it to the controls as below.

PropertyFieldListPicker('lists', {
      label: 'Select a list',
      selectedList: this.properties.lists,
      includeHidden: false,
      orderBy: PropertyFieldListPickerOrderBy.Title,
      disabled: false,
      onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
      properties: this.properties,
      context: this.context as any,
      deferredValidationTime: 0,
      key: 'listPickerFieldId'
 })

This solves my problem, and even the web part is working fine, allowing me to use those PnP Property Pane controls. In the example below, you can see that I used the list picker, column picker, people picker controls, etc., which have a context property; after updating, it is working fine.

I hope you found this article helpful. In this article, I have explained how to fix the error ” Type ‘WebPartContext’ is not assignable to type ‘BaseComponentContext’. Follow this article if you are also facing the same issue while working with PnP property pane controls in SPFx web part.

Also, you may like:

• cannot find module ‘jquery’ or its corresponding type declarations
• Cannot find module ‘@microsoft/sp-build-web’
• a ‘primitive value’ or ‘StartObject’node was expected
• can’t load the application on this page. use the browser back button to retry. if the problem persists, contact the administrator of the site and give them the information in technical details.
• [spfx-serve] The api entry could not be loaded: node_modules/@microsoft/sp-webpart-workbench/lib/api/ in SharePoint Framework