PropertyFieldCollectionData compatible with SpFx 1.19.0?

[JonoSuave]

Category

• [ x ] Question

Version

Please specify what version of the library you are using: [ 3.17.0 ]

If you are not using the latest release, please update and see if the issue is resolved before submitting an issue.

Expected / Desired Behavior / Question

I'd like to use the PropertyFieldCollectionData control when spinning up a new SpFx solution (1.19.0),.

Observed Behavior

When running gulp serve --nobrowser I get the following error:

Error - [webpack] 'dist':
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]

Steps to Reproduce

Create a new SpFx solution v1.19.0. Here's my package.json:

{
  "name": "property-field-collection-data",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=18.17.1 <19.0.0"
  },
  "main": "lib/index.js",
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "@fluentui/react": "^8.106.4",
    "@microsoft/sp-component-base": "1.19.0",
    "@microsoft/sp-core-library": "1.19.0",
    "@microsoft/sp-lodash-subset": "1.19.0",
    "@microsoft/sp-office-ui-fabric-core": "1.19.0",
    "@microsoft/sp-property-pane": "1.19.0",
    "@microsoft/sp-webpart-base": "1.19.0",
    "@pnp/spfx-property-controls": "^3.17.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "tslib": "2.3.1"
  },
  "devDependencies": {
    "@microsoft/eslint-config-spfx": "1.20.1",
    "@microsoft/eslint-plugin-spfx": "1.20.1",
    "@microsoft/rush-stack-compiler-4.7": "0.1.0",
    "@microsoft/sp-build-web": "1.20.1",
    "@microsoft/sp-module-interfaces": "1.20.1",
    "@rushstack/eslint-config": "2.5.1",
    "@types/react": "17.0.45",
    "@types/react-dom": "17.0.17",
    "@types/webpack-env": "~1.15.2",
    "ajv": "^6.12.5",
    "eslint": "8.7.0",
    "eslint-plugin-react-hooks": "4.3.0",
    "gulp": "4.0.2",
    "typescript": "4.7.4"
  }
}

I used the example provided in my webpart:

import * as React from "react";
import * as ReactDom from "react-dom";
import { Version } from "@microsoft/sp-core-library";
import {
	type IPropertyPaneConfiguration,
	PropertyPaneTextField,
	PropertyPaneDynamicField,
	DynamicDataSharedDepth,
} from "@microsoft/sp-property-pane";
import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
import { IReadonlyTheme } from "@microsoft/sp-component-base";
import {
	PropertyFieldCollectionData,
	CustomCollectionFieldType,
} from "@pnp/spfx-property-controls/lib/PropertyFieldCollectionData";

import * as strings from "PropertyFieldCollectionDataWebPartStrings";
import PnPPropertyFieldCollectionData from "./components/PnPPropertyFieldCollectionData";
import { IPropertyFieldCollectionDataProps } from "./components/IPropertyFieldCollectionDataProps";

export interface IPropertyFieldCollectionDataWebPartProps {
	description: string;
	collectionData: any[];
}

export default class PropertyFieldCollectionDataWebPart extends BaseClientSideWebPart<IPropertyFieldCollectionDataWebPartProps> {
	private _isDarkTheme: boolean = false;
	private _environmentMessage: string = "";

	public render(): void {
		const element: React.ReactElement<IPropertyFieldCollectionDataProps> = React.createElement(
			PnPPropertyFieldCollectionData,
			{
				description: this.properties.description,
				isDarkTheme: this._isDarkTheme,
				environmentMessage: this._environmentMessage,
				hasTeamsContext: !!this.context.sdks.microsoftTeams,
				userDisplayName: this.context.pageContext.user.displayName,
			}
		);

		ReactDom.render(element, this.domElement);
	}

	protected onInit(): Promise<void> {
		return this._getEnvironmentMessage().then((message) => {
			this._environmentMessage = message;
		});
	}

	private _getEnvironmentMessage(): Promise<string> {
		if (!!this.context.sdks.microsoftTeams) {
			// running in Teams, office.com or Outlook
			return this.context.sdks.microsoftTeams.teamsJs.app.getContext().then((context) => {
				let environmentMessage: string = "";
				switch (context.app.host.name) {
					case "Office": // running in Office
						environmentMessage = this.context.isServedFromLocalhost
							? strings.AppLocalEnvironmentOffice
							: strings.AppOfficeEnvironment;
						break;
					case "Outlook": // running in Outlook
						environmentMessage = this.context.isServedFromLocalhost
							? strings.AppLocalEnvironmentOutlook
							: strings.AppOutlookEnvironment;
						break;
					case "Teams": // running in Teams
					case "TeamsModern":
						environmentMessage = this.context.isServedFromLocalhost
							? strings.AppLocalEnvironmentTeams
							: strings.AppTeamsTabEnvironment;
						break;
					default:
						environmentMessage = strings.UnknownEnvironment;
				}

				return environmentMessage;
			});
		}

		return Promise.resolve(
			this.context.isServedFromLocalhost
				? strings.AppLocalEnvironmentSharePoint
				: strings.AppSharePointEnvironment
		);
	}

	protected onThemeChanged(currentTheme: IReadonlyTheme | undefined): void {
		if (!currentTheme) {
			return;
		}

		this._isDarkTheme = !!currentTheme.isInverted;
		const { semanticColors } = currentTheme;

		if (semanticColors) {
			this.domElement.style.setProperty("--bodyText", semanticColors.bodyText || null);
			this.domElement.style.setProperty("--link", semanticColors.link || null);
			this.domElement.style.setProperty("--linkHovered", semanticColors.linkHovered || null);
		}
	}

	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("description", {
									label: strings.DescriptionFieldLabel,
								}),
							],
						},
					],
				},
				{
					header: {
						description: strings.PropertyPaneDescription,
					},
					groups: [
						{
							groupFields: [
								PropertyPaneTextField("refinersLabel", {
									label: "Refiners Label",
								}),
								PropertyPaneTextField("refinersPlaceholder", {
									label: "Refiners Placeholder",
								}),
								PropertyPaneDynamicField("refinerSourceData", {
									label: "Refiners",
									propertyValueDepth: DynamicDataSharedDepth.None,
								}),
								PropertyFieldCollectionData("collectionData", {
									key: "collectionData",
									label: "Collection data",
									panelHeader: "Collection data panel header",
									manageBtnLabel: "Manage collection data",
									value: this.properties.collectionData,
									fields: [
										{
											id: "Title",
											title: "Firstname",
											type: CustomCollectionFieldType.string,
											required: true,
										},
										{
											id: "Lastname",
											title: "Lastname",
											type: CustomCollectionFieldType.string,
										},
										{
											id: "Age",
											title: "Age",
											type: CustomCollectionFieldType.number,
											required: true,
										},
										{
											id: "City",
											title: "Favorite city",
											type: CustomCollectionFieldType.dropdown,
											options: [
												{
													key: "antwerp",
													text: "Antwerp",
												},
												{
													key: "helsinki",
													text: "Helsinki",
												},
												{
													key: "montreal",
													text: "Montreal",
												},
											],
											required: true,
										},
										{
											id: "Sign",
											title: "Signed",
											type: CustomCollectionFieldType.boolean,
										},
									],
									disabled: false,
								}),
							],
						},
					],
				},
			],
		};
	}
}