I have 3 web part properties set up in my spfx web part. However it is not showing the default values I have set

  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
  "id": "d1587168-2126-44f1-bc7d-cfa4cc5108ed",
  "alias": "MainArticlesWebPart",
  "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"],

  "preconfiguredEntries": [{
    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
    "group": { "default": "Other" },
    "title": { "default": "Main Articles" },
    "description": { "default": "Main Articles description" },
    "officeFabricIconFontName": "Page",
    "properties": {
      "description": "Show the main articles.",
      "list_title": "Main Articles",
      "site_url": ""

and in the .ts file

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart, WebPartContext } from '@microsoft/sp-webpart-base';

import * as strings from 'MainArticlesWebPartStrings';
import { MainArticles } from './components/MainArticles';
import { IMainArticlesProps } from './components/IMainArticlesProps';

import { sp } from "@pnp/sp/presets/all";

export interface IMainArticlesWebPartProps {
  list_title: string;
  site_url: string;

export default class MainArticlesWebPart extends BaseClientSideWebPart<IMainArticlesWebPartProps> {

  public render(): void {
    const element: React.ReactElement<IMainArticlesProps> = React.createElement(
        list_title: this.properties.list_title,
        site_url: this.properties.site_url
    ReactDom.render(element, this.domElement);

  public onInit(): Promise<void> {
        spfxContext: this.context
    return super.onInit();

  protected onDispose(): void {

  protected get dataVersion(): Version {
    return Version.parse('1.0');

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
          header: {
            description: strings.PropertyPaneDescription
          groups: [
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('list_title', {
                  label: strings.ListTitleFieldLabel
                PropertyPaneTextField('site_url', {
                  label: strings.SiteURLFieldLabel

It shows as

enter image description here

I can't see what's wrong. Does anyone know?

2 Answers 2


You need to check 2 places in your code. your webpart ts file has a interface ending with WebPartProps make you sure you have added properties in there as well. It should look like

export interface MainArticlesWebPartProps{
  description: string;
  list_title: string;
  site_url: string;
  • I checked that, it is just a export interface code, and it has my 3 properties in it.
    – omega
    Commented Sep 11, 2020 at 2:39
  • can you update the question with code from webpart ts file Commented Sep 11, 2020 at 2:40
  • ok i have updated it
    – omega
    Commented Sep 11, 2020 at 2:42
  • i don't see any issue with code, before running gulp serve did you execute gulp build and gulp bundle? make sure you save the file before running gulp serve Commented Sep 11, 2020 at 2:46
  • 1
    I just needed to do gulp build
    – omega
    Commented Sep 11, 2020 at 3:11

You could stop the running gulp serve task (ctrl + c) and then re-run it again. That way the properties are also refreshed. In few cases that doesn't help you can try to afterwards delete the webpart from the workbench and re-add it. Always works.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.