SPFX : Resolving error – Module “@pnp/sp” has no exported member ‘sp’.ts(2305)

Hi All,

Greetings for the day ! Today new issue and solution!

Background:

• Implementing SPFx component – “demoapp” to get the SharePoint list data and show in some form on UI
• So installed module “@pnp/sp” using npm as

npm install @pnp/sp 

• We have module get installed successfully and started implementation
• In our demoapp.tsx file we have imported member ‘sp’ from module “@pnp/sp/” as

import {sp} from "@pnp/sp/"

• While importing “sp” member we are getting an error

Error / Issue :

Module “@pnp/sp” has no exported member ‘sp’.ts(2305)

Solution / Cause :

• I have installed the latest version on module – “@pnp/sp“
• I could see the version of this module from my package.json file as

 "@pnp/sp": "^3.1.0"

• This is the PnPjs version 3
• In PnPjs version 3 the sp and graph objects have been deprecated and will need to be replaced by the new objects like spfi and graphfi – In next article I will demonstrate spfi object
• Still there are few options if we dont want to go with latest version and continue with our older version of PnPjs and one of them is
  • Uninstall the recent / latest version of PnPjs
  • Install Version 2 of PnPjs as

npm uninstall @pnp/sp

npm i @pnp/sp@2.11.0

Recommendation : Best practice or recommendation is – go with latest version. Microsoft has provided detailed transition guide for transition from Version 2 to Version 3- please have a look once – https://pnp.github.io/pnpjs/transition-guide/

Thanks for reading! Please feel free to discuss in case any issue / suggestion / questions

HAVE A GREAT TIME !!