How to Use PnP ListItemComments in SPFx and Fix the ServiceScope Error

Introduction

The ListItemComments control from the PnP SPFx React Controls library allows you to display and manage modern SharePoint Online item comments with minimal effort.

However, when implementing it in an SPFx solution, developers often encounter this TypeScript error:

Type 'ServiceScope' is not assignable to type 'ServiceScope'
Types have separate declarations of a private property '_registrations'

This article explains:

• How to implement ListItemComments
• What serviceScope is and why it is required
• Why the error occurs
• A quick workaround (as any)
• The proper long-term fix

Official Documentation

• PnP Control:
  https://pnp.github.io/sp-dev-fx-controls-react/controls/ListItemComments/
• SPFx ServiceScope:
  https://learn.microsoft.com/en-us/javascript/api/@microsoft/sp-core-library/servicescope
• SPFx Overview:
  https://learn.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview

Basic Implementation

React Component

import * as React from ‘react’;

import { ListItemComments } from ‘@pnp/spfx-controls-react/lib/ListItemComments’;

import { WebPartContext } from ‘@microsoft/sp-webpart-base’;

interface IListItemCommentsWpProps {

  context: WebPartContext;

}

const ListItemCommentsWp: React.FC<IListItemCommentsWpProps> = (props) => {

  return (

    <ListItemComments

      webUrl=”https://contoso.sharepoint.com/sites/ThePerspective“

      listId=”dfa283f4-5faf-4d54-b6b8-5bcaf2725af5″

      itemId={1}

      serviceScope={props.context.serviceScope as any}

      numberCommentsPerPage={10}

      label=”ListItem Comments”

    />

  );

};

export default ListItemCommentsWp;

What is serviceScope?

In SharePoint Framework (SPFx), ServiceScope is a dependency injection container used to provide shared services across components.

Examples of services it manages include:

• SPHttpClient
• PageContext
• Custom services

Official reference:
https://learn.microsoft.com/en-us/javascript/api/@microsoft/sp-core-library/servicescope

In SPFx WebParts, it is accessed via:

this.context.serviceScope

When working inside React components, it must be passed through props.

Why the Error Happens

The error:

Type 'ServiceScope' is not assignable to type 'ServiceScope'

is caused by duplicate versions of @microsoft/sp-core-library in your project.

Typical problematic structure:

node_modules/
  @microsoft/sp-core-library
  @pnp/spfx-controls-react/
    node_modules/
      @microsoft/sp-core-library

Even though both types are named ServiceScope, TypeScript treats them as different types because they come from different package instances.

Quick Fix (Workaround)

You used:

serviceScope={props.context.serviceScope as any}

Why it works

• Bypasses TypeScript type checking
• Forces compatibility at compile time
• Works at runtime because the object is correct

When to use

• Proof of concept
• Testing scenarios
• Temporary workaround

When to avoid

• Production solutions
• Enterprise-grade deployments

Proper Fix (Recommended)

1. Clean dependencies

rm -rf node_modules package-lock.json

npm install

2. Deduplicate packages

npm dedupe

3. Check for duplicates

npm ls @microsoft/sp-core-library

You should see only one version.

4. Align package versions

Ensure your package.json uses compatible versions:

“@microsoft/sp-core-library”: “1.x.x”,

“@pnp/spfx-controls-react”: “compatible version”

PnP versions must match your SPFx version.

Compatibility guidance:
https://pnp.github.io/sp-dev-fx-controls-react/

Best Practices

Use correct types

itemId={1}  // number, not string

Use valid strings

webUrl=”https://contoso.sharepoint.com/sites/ThePerspective“

“

Always pass SPFx context

serviceScope={props.context.serviceScope}

Ensure feature availability

The control only works when:

• Comments are enabled in the list
• SharePoint Online is used
• Modern UI is enabled

Recommended Architecture

WebPart

<ListItemCommentsWp context={this.context} />

React Component

serviceScope={props.context.serviceScope}

Final Result

After applying the fix:

• Comments render correctly
• Users can add and reply to comments
• UI matches SharePoint modern experience
• No TypeScript errors

Conclusion

The ServiceScope error is not caused by incorrect usage of the control, but by dependency duplication in the project.

You have two approaches:

Quick workaround

as any

Proper solution

• Remove duplicate dependencies
• Align SPFx and PnP versions
• Deduplicate node_modules