I have a spfx. As soon as I import anything from pnp ( @pnp/[email protected] ), example

import { Web } from "@pnp/sp/webs";

I get the following error on gulp serve

enter image description here

it works fine if I have @pnp/[email protected] but then following code will not work

import { spfi, SPFI, SPFx } from "@pnp/sp";

export class SPService implements ISPService {

    public static readonly servicekey: ServiceKey<ISPService> = ServiceKey.create<ISPService>('CLog.SPService', SPService);

    private _sp: SPFI;

    constructor(serviceScope: ServiceScope ) {
        serviceScope.whenFinished(() => {
            const pageContext: PageContext = serviceScope.consume(PageContext.serviceKey);
            this._sp = spfi().using(SPFx({ pageContext }));

    public async getListItems(listTitle: string): Promise<any[]> {
        const response = await this._sp.web.lists.getByTitle(listTitle).items();
        return response;

Any suggestions please.

1 Answer 1


Getting pnp version compatible with the SPFx version you are currently using might be time consuming. On top of it, you need to make sure Node.js, npm, react and TypeScript versions are aligned.

To avoid the risk of incompatibility, I recommend using the PnP SPFx generator. It includes correct versions of the pnp including pnp core and PnP SPFx Controls.

To install the pnp Spfx yeoman generator, run

npm install -g @pnp/generator-spfx

To run the yeoman generator:

yo @pnp/spfx
  • Thank you Denis
    – Saira
    Feb 2, 2023 at 20:51

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.