Default property values not working in SPFx web part

Question

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 {
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} 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(
      MainArticles,
      {
        list_title: this.properties.list_title,
        site_url: this.properties.site_url
      }
    );
    
    ReactDom.render(element, this.domElement);
  }

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

  protected onDispose(): void {
    ReactDom.unmountComponentAtNode(this.domElement);
  }

  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

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

Answer 1

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;
}