Packaged/Shipped version adds : to data ?? Workbenches are fine

Question

when I run my SPFx webpart solution in the local- or hosted- Workbench, everything seems OK. The data received from lists is displayed correctly, e.g. Freddy, Prayer request, Prayer for money, Food parcel, Appeared hungry. When I package and install the solution, a colon : is added to each retrieved text.

Hosted Workbench using the same list as source:

Packaged solution using the same list as source:

The strange field names are

• Title: Prayer request / Food parcel
• V3Comments: Prayer for money / Appeared hungry

• Nickname: Freddy

  My function to retrieve the items looks as follows:

  private _getItems(requester: SPHttpClient): Promise<IInteractionLogItem[]> {
          const queryString: string = `?$select=Id,Title,Confidential1,Nickname,CallTime,` + 
    `Created,Modified,ReferredBy,Interaction_x0020_from_x0020_cli,Client_x0020_Satisfaction,Staff_x0020_Satisfaction,V3Comments,Interaction_x0020_Method,` +
    `Author/Id,Author/Title,Author/EMail,Client/Id,Client/Title,Client/EMail&` +
    `$expand=Author,Client`;
  const queryUrl: string = this._listItemsUrl + queryString;
  
  return requester.get(queryUrl, SPHttpClient.configurations.v1)
    .then((response: SPHttpClientResponse) => {
      return response.json();
    })
    .then((json: { value: IInteractionLogItem[] }) => {
      return json.value.map((interactionLog: IInteractionLogItem) => {
        const returnItem: IInteractionLogItem = 
        { 
          Id: interactionLog.Id, 
          Title: interactionLog.Title, 
          CallTime: interactionLog.CallTime,
          ClientSatisfaction: interactionLog['Client_x0020_Satisfaction'],            
          Confidential: interactionLog['Confidential1'],
          Created: interactionLog.Created,
          InteractionMethod: interactionLog['Interaction_x0020_Method'],
          Modified: interactionLog.Modified,
          Nickname: interactionLog.Nickname,
          StaffSatisfaction: interactionLog['Staff_x0020_Satisfaction'],
          V3Comments: interactionLog.V3Comments,
          ReferredBy: interactionLog.ReferredBy,
          InteractionFromClient: interactionLog['Interaction_x0020_from_x0020_cli'],
  
          Client: interactionLog.Client,
          CreatedBy: interactionLog['Author'],
          AssignedTo: interactionLog.AssignedTo,
          ResolvedBy: interactionLog.ResolvedBy,
          Referrer: interactionLog.Referrer
        };
  
        returnItem.CreatedBy.Picture = this._getPictureUrl(returnItem.CreatedBy.EMail);
        returnItem.Client.Picture = this._getPictureUrl(returnItem.Client.EMail);
        return returnItem;
      });
    });
  }
  

I am confused where to start, as debugging in the working Workbench seems pointless to me. I got no idea how to debug the installed package. I followed the official React-Todo-Basic and React-Todo samples.

Any help is valued and appreciated, Dennis

Answer 1

I had a similar issue. I found that any text within a <label> element will have a : (colon) at the end.

There is a CSS definition on the page, which does this

label::after {
content: ":"; }

I used <div> with some custom CSS instead of <label> tags. Or you can override the CSS definition to not show : (colon).

Note, that <label> doesn't show colons in workbench.

Hope this helps.