Here’s a detailed article based on resolving the TS2305 error when using PnPjs in a SharePoint Framework (SPFx) project:

Resolving TS2305 Error: Module ‘”@pnp/sp/presets/all”‘ Has No Exported Member ‘sp’ in SPFx Projects

When working with SharePoint Framework (SPFx) and integrating PnPjs, developers might encounter an error like this:

TS2305: Module '"@pnp/sp/presets/all"' has no exported member 'sp'

This error usually occurs due to a version mismatch or incorrect import statements for the PnPjs library. As PnPjs has evolved, some APIs have changed, including how you import and initialize the library in your SPFx projects. In this article, we’ll guide you through the correct way to configure and use PnPjs in your SPFx solutions, ensuring you can avoid such issues.

Understanding the Error

The error occurs when TypeScript can’t find the sp member in the PnPjs library. This issue often arises when you’re using outdated import paths or an incorrect library version. In the latest version of PnPjs, the way sp is imported and used has changed.

Step-by-Step Solution

Here’s how you can resolve this issue and correctly set up PnPjs in your SPFx project:

Step 1: Install the Latest Version of PnPjs

First, ensure that you’re using the latest version of PnPjs. Open a terminal in your SPFx project directory and run the following command to install the required packages:

npm install @pnp/sp --save

If you’re also using Microsoft Graph alongside SharePoint, install the Graph package as well:

npm install @pnp/graph --save

This installs the necessary PnPjs libraries into your SPFx project.

Step 2: Update Your Import Statements

The way sp is imported in the latest versions of PnPjs has changed. Instead of using:

import { sp } from "@pnp/sp/presets/all";  // Outdated

You should update it to:

import { spfi, SPFx } from "@pnp/sp";  // Correct imports for SPFx

• spfi() initializes the PnPjs fluent interface.
• SPFx(this.context) ensures that PnPjs is properly authenticated with the SharePoint context of your SPFx web part.

Step 3: Set Up PnPjs in Your SPFx Web Part

Now, modify your SPFx web part’s onInit() method to correctly initialize the PnPjs library with the SPFx context:

protected onInit(): Promise<void> {
    return super.onInit().then(_ => {
        const sp = spfi().using(SPFx(this.context));  // Initialize PnPjs with SPFx context
    });
}

Step 4: Perform SharePoint Operations

With the PnPjs library properly set up, you can now perform SharePoint operations such as retrieving list items. Here’s an example of how to retrieve items from a SharePoint list using the new setup:

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

protected onInit(): Promise<void> {
    return super.onInit().then(_ => {
        const sp = spfi().using(SPFx(this.context));  // Setup PnPjs with SPFx context

        // Fetch items from the SharePoint list
        sp.web.lists.getByTitle("Documents").items.get().then(items => {
            console.log(items);
        });
    });
}

In this example:

• spfi().using(SPFx(this.context)) ensures that PnPjs knows how to authenticate and communicate with SharePoint using the current SPFx context.
• We import Web from @pnp/sp/webs to work with SharePoint sites and lists.

Example: CRUD Operations with PnPjs

Now that your project is correctly configured, let’s look at some common SharePoint CRUD operations using PnPjs:

Retrieving List Items

Here’s how you can retrieve all items from a SharePoint list:

sp.web.lists.getByTitle("Documents").items.get().then(items => {
    console.log(items);
});

Adding a New List Item

To add a new item to a SharePoint list:

sp.web.lists.getByTitle("Documents").items.add({
    Title: "New Document"
}).then(response => {
    console.log("Item added:", response);
});

Updating an Item

To update an existing item in a list:

sp.web.lists.getByTitle("Documents").items.getById(1).update({
    Title: "Updated Document"
}).then(response => {
    console.log("Item updated:", response);
});

Deleting an Item

To delete an item from a SharePoint list:

sp.web.lists.getByTitle("Documents").items.getById(1).delete().then(response => {
    console.log("Item deleted:", response);
});

Key Takeaways

• Correct Import Paths: Ensure you are using the correct import paths when working with PnPjs, especially after recent updates. spfi() and SPFx are now the recommended approach for SPFx web parts.
• Library Updates: Always keep your libraries up to date to avoid version-related issues.
• SPFx Context: Make sure to pass the SPFx context (this.context) to PnPjs so it can authenticate and interact with SharePoint APIs correctly.

By following these steps, you can successfully set up PnPjs in your SPFx project and resolve the TS2305 error related to incorrect imports.

Summary of Key Commands

By applying these changes, you should now be able to build your SPFx project without encountering the TS2305 error, and you’ll have a correctly configured environment to leverage PnPjs for your SharePoint development.