SPFX > pnp.sp reference in React project

%3CLINGO-SUB%20id%3D%22lingo-sub-115349%22%20slang%3D%22en-US%22%3ESPFX%20%26gt%3B%20pnp.sp%20reference%20in%20React%20project%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-115349%22%20slang%3D%22en-US%22%3E%3CP%3EI%20have%20a%20working%20SPFX%20project%20using%20pnp.sp.search%20(without%20an%20additional%20javascript%20framework).%3C%2FP%3E%3CP%3EI%20import%20pnp.sp%20like%20this%20in%20my%20webparts.ts%20file%20%3A%3C%2FP%3E%3CPRE%3Eimport%20*%20as%20pnp%20from%20'sp-pnp-js'%3B%0Aimport%20%7B%20SearchQuery%2C%20SearchResults%20%7D%20from%20%22sp-pnp-js%22%3B%3C%2FPRE%3E%3CP%3EAll%20my%20coding%20is%20done%20within%20this%20file.%3C%2FP%3E%3CP%3ENow%20I%20want%20to%20do%20some%20testing%20using%20React.%3C%2FP%3E%3CP%3ESo%20I%20create%20a%20new%20project%20using%20the%20react%20framework.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20reference%20the%20same%20way%20(in%20my%20webparts.ts%20file)%20but%20do%20the%20coding%20in%20the%20components%2Fblabla.tsx%20file.%3C%2FP%3E%3CP%3EThis%20is%20not%20working.%20I%20get%20an%20error%20%22cannot%20find%20pnp%22.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWhen%20I%20import%20pnp.sp%20in%20the%20components%2Fblabla.tsx%20file%20I%20get%20even%20more%20errors%20telling%20me%2C%20for%20example%2C%20%22Argument%20of%20type%20''Element%22%20is%20not%20assignable%20to%20parameter%20f%20type%20'string'.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESo%20how%20do%20I%20Import%20pnp.sp%20in%20a%20React%20project%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-115349%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EExtensibility%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EPnP%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-115434%22%20slang%3D%22en-US%22%3ERe%3A%20SPFX%20%26gt%3B%20pnp.sp%20reference%20in%20React%20project%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-115434%22%20slang%3D%22en-US%22%3E%3CP%3EThanks%2C%20will%20have%20a%20look.%3C%2FP%3E%3CP%3EHowever%2C%20my%20search%20is%20somewhat%20more%20complex.%20Need%20a%20refinement%20and%20some%20more%20properties%20in%20my%20result.%20Have%20not%20figured%20out%20how%20to%20achieve%20that%20with%20you%20syntax.%20Is%20this%20possible%20using%20your%20syntax%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-115423%22%20slang%3D%22en-US%22%3ERe%3A%20SPFX%20%26gt%3B%20pnp.sp%20reference%20in%20React%20project%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-115423%22%20slang%3D%22en-US%22%3EIf%20you%20haven%C2%B4t%20read%20this%2C%20it%20might%20help.%3CBR%20%2F%3E%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2FPnP-JS-Core%2Fwiki%2FWorking-With%3A-Search%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FSharePoint%2FPnP-JS-Core%2Fwiki%2FWorking-With%3A-Search%3C%2FA%3E%3CBR%20%2F%3E%3CBR%20%2F%3EYou%20can%20use%20several%20methods%20to%20achieve%20what%20you%20need.%20In%20my%20web%20part%2C%20I%20don%C2%B4t%20use%20SearchQuery%3A%3CBR%20%2F%3E%3CBR%20%2F%3Epnp.sp.search(this.props.searchText).then((r%3A%20SearchResults)%20%3D%26gt%3B%20%7B%3CBR%20%2F%3E%2F%2F%20do%20something%3CBR%20%2F%3E%7D)%3B%3CBR%20%2F%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-115412%22%20slang%3D%22en-US%22%3ERe%3A%20SPFX%20%26gt%3B%20pnp.sp%20reference%20in%20React%20project%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-115412%22%20slang%3D%22en-US%22%3E%3CP%3EThe%20stange%20thing%20is%20that%20when%20I%20right-mouse%20click%20om%20%22SearchQuery%22%20it%20does%20not%20find%20a%20definition.%3C%2FP%3E%3CP%3EI%20imported%20it%20like%20this%3A%3C%2FP%3E%3CPRE%3Eimport%20%7B%20SearchQuery%2C%20SearchResults%20%7D%20from%20'sp-pnp-js'%3B%3C%2FPRE%3E%3CP%3ESearchResults%2C%20however%2C%20does%20go%20to%20the%20right%20definition%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-115405%22%20slang%3D%22en-US%22%3ERe%3A%20SPFX%20%26gt%3B%20pnp.sp%20reference%20in%20React%20project%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-115405%22%20slang%3D%22en-US%22%3EGood%20luck%20%3A)%3C%2Fimg%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%22In%20JSX%2C%20%3CMYCOMPONENT%3E%3C%2FMYCOMPONENT%3E%20alone%20is%20valid%20while%20%3CMYCOMPONENT%3E%20isn't.%20All%20tags%20must%20be%20closed%2C%20either%20with%20the%20self-closing%20format%20or%20with%20a%20corresponding%20closing%20tag%20(%3C%2FMYCOMPONENT%3E).%22%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-115394%22%20slang%3D%22en-US%22%3ERe%3A%20SPFX%20%26gt%3B%20pnp.sp%20reference%20in%20React%20project%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-115394%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F55998%22%20target%3D%22_blank%22%3E%40Maggan%20W%C3%A5hlin%3C%2FA%3EThanks%20for%20all%20your%20suggestions.%20But%20unfortunately%2C%20no%20luck.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20notice%20thing%20go%20wrong%20on%20%22SearchQuery%22%3C%2FP%3E%3CPRE%3Eprivate%20GetSearchresults()%3A%20void%20%7B%0A%20%20%20%20pnp.sp.search(%26lt%3BSearchQuery%26gt%3B)%0A%20%20%0A%20%20%7D%20%20%3C%2FPRE%3E%3CP%3EJsx%20element%20%22SearchQuery%22%20has%20no%20corresponding%20closing%20tag%20%3F%3F%3F%3F%3F%26nbsp%3B%3C%2FP%3E%3CP%3EI'll%20will%20do%20some%20more%20testing.%20Hope%20I%20can%20post%20the%20solution%20soon%20%3B)%3C%2Fimg%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-115387%22%20slang%3D%22en-US%22%3ERe%3A%20SPFX%20%26gt%3B%20pnp.sp%20reference%20in%20React%20project%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-115387%22%20slang%3D%22en-US%22%3EThere%20are%20some%20differences%20in%20the%20types%20definitions.%20You%20could%20just%20try%20to%20use%20my%20config%20and%20run%20npm%20install.%20That%20should%20verify%20any%20incompatibilities.%3CBR%20%2F%3E%3CBR%20%2F%3EIf%20you%20still%20don%C2%B4t%20get%20it%20working%2C%20I%20rest%20my%20case%20%3B)%3C%2Fimg%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-115386%22%20slang%3D%22en-US%22%3ERe%3A%20SPFX%20%26gt%3B%20pnp.sp%20reference%20in%20React%20project%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-115386%22%20slang%3D%22en-US%22%3E%3CP%3EApart%20from%20using%20the%201.3%20version%20of%20the%20framework%2C%20I%20do%20not%20notice%20any%20difference.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%3E%7B%0A%20%20%22name%22%3A%20%22react-search%22%2C%0A%20%20%22version%22%3A%20%220.0.1%22%2C%0A%20%20%22private%22%3A%20true%2C%0A%20%20%22engines%22%3A%20%7B%0A%20%20%20%20%22node%22%3A%20%22%26gt%3B%3D0.10.0%22%0A%20%20%7D%2C%0A%20%20%22scripts%22%3A%20%7B%0A%20%20%20%20%22build%22%3A%20%22gulp%20bundle%22%2C%0A%20%20%20%20%22clean%22%3A%20%22gulp%20clean%22%2C%0A%20%20%20%20%22test%22%3A%20%22gulp%20test%22%0A%20%20%7D%2C%0A%20%20%22dependencies%22%3A%20%7B%0A%20%20%20%20%22%40microsoft%2Fsp-core-library%22%3A%20%22~1.3.0%22%2C%0A%20%20%20%20%22%40microsoft%2Fsp-lodash-subset%22%3A%20%22~1.3.0%22%2C%0A%20%20%20%20%22%40microsoft%2Fsp-webpart-base%22%3A%20%22~1.3.0%22%2C%0A%20%20%20%20%22%40types%2Freact%22%3A%20%2215.0.38%22%2C%0A%20%20%20%20%22%40types%2Freact-addons-shallow-compare%22%3A%20%220.14.17%22%2C%0A%20%20%20%20%22%40types%2Freact-addons-test-utils%22%3A%20%220.14.15%22%2C%0A%20%20%20%20%22%40types%2Freact-addons-update%22%3A%20%220.14.14%22%2C%0A%20%20%20%20%22%40types%2Freact-dom%22%3A%20%220.14.18%22%2C%0A%20%20%20%20%22%40types%2Fwebpack-env%22%3A%20%22%26gt%3B%3D1.12.1%20%26lt%3B1.14.0%22%2C%0A%20%20%20%20%22react%22%3A%20%2215.4.2%22%2C%0A%20%20%20%20%22react-dom%22%3A%20%2215.4.2%22%2C%0A%20%20%20%20%22sp-pnp-js%22%3A%20%22%5E3.0.1%22%0A%20%20%7D%2C%0A%20%20%22devDependencies%22%3A%20%7B%0A%20%20%20%20%22%40microsoft%2Fsp-build-web%22%3A%20%22~1.3.0%22%2C%0A%20%20%20%20%22%40microsoft%2Fsp-module-interfaces%22%3A%20%22~1.3.0%22%2C%0A%20%20%20%20%22%40microsoft%2Fsp-webpart-workbench%22%3A%20%22~1.3.0%22%2C%0A%20%20%20%20%22gulp%22%3A%20%22~3.9.1%22%2C%0A%20%20%20%20%22%40types%2Fchai%22%3A%20%22%26gt%3B%3D3.4.34%20%26lt%3B3.6.0%22%2C%0A%20%20%20%20%22%40types%2Fmocha%22%3A%20%22%26gt%3B%3D2.2.33%20%26lt%3B2.6.0%22%0A%20%20%7D%0A%7D%3C%2FPRE%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-115384%22%20slang%3D%22en-US%22%3ERe%3A%20SPFX%20%26gt%3B%20pnp.sp%20reference%20in%20React%20project%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-115384%22%20slang%3D%22en-US%22%3EAh%2C%20sorry.%3CBR%20%2F%3EGot%20it%2C%20thanks%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-115383%22%20slang%3D%22en-US%22%3ERe%3A%20SPFX%20%26gt%3B%20pnp.sp%20reference%20in%20React%20project%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-115383%22%20slang%3D%22en-US%22%3E%3CP%3EThe%20file%20should%20be%20at%20the%20root%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20167px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F21951i8E90F0178E1C8FA3%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Capture.PNG%22%20title%3D%22Capture.PNG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIf%20you%20installed%20the%20solution%20through%20the%20yeoman%20generator%20it%20should%20be%20there.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-115379%22%20slang%3D%22en-US%22%3ERe%3A%20SPFX%20%26gt%3B%20pnp.sp%20reference%20in%20React%20project%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-115379%22%20slang%3D%22en-US%22%3EHmm%2C%20I%20do%20not%20have%20a%20%22package.json%22%20in%20my%20project.%20Should%20that%20be%20under%20the%20%22Config%22%20folder%3F.%3CBR%20%2F%3EI%20do%20have%20a%20%22package-solution.json%22%20but%20I'm%20not%20allowed%20to%20create%20any%20%22dependencies%22%20there.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-115376%22%20slang%3D%22en-US%22%3ERe%3A%20SPFX%20%26gt%3B%20pnp.sp%20reference%20in%20React%20project%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-115376%22%20slang%3D%22en-US%22%3EMaybe%20it%20is%20a%20package%20dependency%20issue%3F%20Check%20your%20versions%20in%20package.json.%20This%20is%20my%20config%3A%3CBR%20%2F%3E%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22name%22%3A%20%22order-webpart%22%2C%3CBR%20%2F%3E%22version%22%3A%20%220.0.1%22%2C%3CBR%20%2F%3E%22private%22%3A%20true%2C%3CBR%20%2F%3E%22engines%22%3A%20%7B%3CBR%20%2F%3E%22node%22%3A%20%22%26gt%3B%3D0.10.0%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22dependencies%22%3A%20%7B%3CBR%20%2F%3E%22%40microsoft%2Fsp-core-library%22%3A%20%22~1.1.0%22%2C%3CBR%20%2F%3E%22%40microsoft%2Fsp-webpart-base%22%3A%20%22~1.1.1%22%2C%3CBR%20%2F%3E%22%40types%2Freact%22%3A%20%220.14.46%22%2C%3CBR%20%2F%3E%22%40types%2Freact-addons-shallow-compare%22%3A%20%220.14.17%22%2C%3CBR%20%2F%3E%22%40types%2Freact-addons-test-utils%22%3A%20%220.14.15%22%2C%3CBR%20%2F%3E%22%40types%2Freact-addons-update%22%3A%20%220.14.14%22%2C%3CBR%20%2F%3E%22%40types%2Freact-dom%22%3A%20%220.14.18%22%2C%3CBR%20%2F%3E%22%40types%2Fwebpack-env%22%3A%20%22%26gt%3B%3D1.12.1%20%26lt%3B1.14.0%22%2C%3CBR%20%2F%3E%22jquery%22%3A%20%22%5E2.2.4%22%2C%3CBR%20%2F%3E%22react%22%3A%20%2215.4.2%22%2C%3CBR%20%2F%3E%22react-dom%22%3A%20%2215.4.2%22%2C%3CBR%20%2F%3E%22sp-pnp-js%22%3A%20%22%5E3.0.1%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22devDependencies%22%3A%20%7B%3CBR%20%2F%3E%22%40microsoft%2Fsp-build-web%22%3A%20%22~1.1.0%22%2C%3CBR%20%2F%3E%22%40microsoft%2Fsp-module-interfaces%22%3A%20%22~1.1.0%22%2C%3CBR%20%2F%3E%22%40microsoft%2Fsp-webpart-workbench%22%3A%20%22~1.1.0%22%2C%3CBR%20%2F%3E%22gulp%22%3A%20%22~3.9.1%22%2C%3CBR%20%2F%3E%22%40types%2Fchai%22%3A%20%22%26gt%3B%3D3.4.34%20%26lt%3B3.6.0%22%2C%3CBR%20%2F%3E%22%40types%2Fmocha%22%3A%20%22%26gt%3B%3D2.2.33%20%26lt%3B2.6.0%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22scripts%22%3A%20%7B%3CBR%20%2F%3E%22build%22%3A%20%22gulp%20bundle%22%2C%3CBR%20%2F%3E%22clean%22%3A%20%22gulp%20clean%22%2C%3CBR%20%2F%3E%22test%22%3A%20%22gulp%20test%22%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-115371%22%20slang%3D%22en-US%22%3ERe%3A%20SPFX%20%26gt%3B%20pnp.sp%20reference%20in%20React%20project%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-115371%22%20slang%3D%22en-US%22%3E%3CP%3ETried%20that%20but%20no%20luck%20sofar.%20Maybe%20my%20code%20is%20wrong%20in%20some%20way.%20I%20just%20copied%20it%20from%20my%20working%20project.%20Like%20this%3A%3C%2FP%3E%3CPRE%3Eimport%20%7B%20default%20as%20pnp%2C%20ItemAddResult%2C%20Web%20%7D%20from%20%22sp-pnp-js%22%3B%0Aimport%20%7B%20SearchQuery%2C%20SearchResults%20%7D%20from%20%22sp-pnp-js%22%3B%0A%0Aimport%20*%20as%20React%20from%20'react'%3B%0Aimport%20styles%20from%20'.%2FReactsearch.module.scss'%3B%0Aimport%20%7B%20IReactsearchProps%20%7D%20from%20'.%2FIReactsearchProps'%3B%0Aimport%20%7B%20escape%20%7D%20from%20'%40microsoft%2Fsp-lodash-subset'%3B%0A%0Aexport%20default%20class%20Reactsearch%20extends%20React.Component%26lt%3BIReactsearchProps%2C%20%7B%7D%26gt%3B%20%7B%0A%20%20%0A%20%20private%20GetSearchresults()%3A%20void%20%7B%0A%20%20%20%20pnp.sp.search(%26lt%3BSearchQuery%26gt%3B%7B%0A%20%20%20%20%20Querytext%3A%20%22ContentType%3ATEST_matters%22%2C%0A%20%20%20%20%20RowLimit%3A%2010%2C%0A%20%20%20%20%20EnableInterleaving%3A%20true%2C%0A%20%20%20%20%20SelectProperties%3A%20%5B%22RefinableString10%22%2C%20%22CreatedBy%22%2C%22Created%22%5D%2C%20%0A%20%20%20%20%20RefinementFilters%3A%20%5B%22RefinableString18%3Aequals('false')%22%5D%2C%0A%20%20%20%20%20%7D).then((result%3A%20SearchResults)%20%3D%26gt%3B%20%7B%0A%20%20%20%20%20%20%20var%20props%20%3D%20result.PrimarySearchResults%3B%0A%20%20%20%20%20%20%20debugger%3B%0A%20%20%20%0A%20%20%20%20var%20propValue%20%3D%20%22%22%3B%0A%20%20%20%20var%20counter%20%3D%201%3B%0A%20%20%20%20props.forEach(function(object)%20%7B%0A%20%20%20%20propValue%20%2B%3D%20counter%2B%2B%20%2B'.%20Title%20-%20'%20%2Bobject.RefinableString10%20%2B%22%26lt%3Bbr%2F%26gt%3B%22%2B%22Rank%20-%20%22%20%2B%20object.Rank%0A%20%20%20%20%20%2B%22%26lt%3Bbr%2F%26gt%3B%22%2B%22File%20Type%20-%20%22%20%2B%20object.FileType%2B%22%26lt%3Bbr%2F%26gt%3B%22%2B%20%22Original%20Path%20-%20%22%0A%20%20%20%20%20%2Bobject.OriginalPath%20%2B%22%26lt%3Bbr%2F%26gt%3B%22%2B%22%20Summary%20-%20%22%2B%20object.HitHighlightedSummary%20%2B%0A%20%20%20%20%20%22%26lt%3Bbr%2F%26gt%3B%22%2B%22%26lt%3Bbr%2F%26gt%3B%22%3B%0A%20%20%20%20%7D)%3B%0A%20%20%20%20document.getElementById(%22spSearchresults%22).innerHTML%20%3D%20propValue%3B%0A%20%20%20%20%7D).catch(function(err)%20%7B%0A%20%20%20%20console.log(%22Error%3A%20%22%20%2B%20err)%3B%0A%20%20%20%20%7D)%3B%0A%20%20%20%0A%20%20%20%20%7D%0A%0A%0A%0A%20%20public%20render()%3A%20React.ReactElement%26lt%3BIReactsearchProps%26gt%3B%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%26lt%3Bdiv%20className%3D%7Bstyles.reactsearch%7D%26gt%3B%0A%20%20%20%20%20%20%20%20%26lt%3Bdiv%20className%3D%7Bstyles.container%7D%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%26lt%3Bdiv%20className%3D%7B%60ms-Grid-row%20ms-bgColor-themeDark%20ms-fontColor-white%20%24%7Bstyles.row%7D%60%7D%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3Bdiv%20className%3D%22ms-Grid-col%20ms-lg10%20ms-xl8%20ms-xlPush2%20ms-lgPush1%22%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3Bspan%20className%3D%22ms-font-xl%20ms-fontColor-white%22%26gt%3BWelcome%20to%20SharePoint!%26lt%3B%2Fspan%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3Bp%20className%3D%22ms-font-l%20ms-fontColor-white%22%26gt%3BCustomize%20SharePoint%20experiences%20using%20Web%20Parts.%26lt%3B%2Fp%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3Bp%20className%3D%22ms-font-l%20ms-fontColor-white%22%26gt%3B%7Bescape(this.props.description)%7D%26lt%3B%2Fp%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3Ba%20href%3D%22https%3A%2F%2Faka.ms%2Fspfx%22%20className%3D%7Bstyles.button%7D%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3Bspan%20className%3D%7Bstyles.label%7D%26gt%3BLearn%20more%26lt%3B%2Fspan%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%2Fa%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%26lt%3B%2Fdiv%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%26lt%3B%2Fdiv%26gt%3B%0A%20%20%20%20%20%20%20%20%26lt%3B%2Fdiv%26gt%3B%0A%20%20%20%20%20%20%26lt%3B%2Fdiv%26gt%3B%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%3C%2FPRE%3E%3CP%3EThis%20is%20the%20.tsx%20file.%20I%20also%20did%20the%20same%20import%20in%20the%20webpart.ts%20file.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-115369%22%20slang%3D%22en-US%22%3ERe%3A%20SPFX%20%26gt%3B%20pnp.sp%20reference%20in%20React%20project%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-115369%22%20slang%3D%22en-US%22%3EI%20reference%20the%20package%20this%20way%3A%3CBR%20%2F%3E%3CBR%20%2F%3Eimport%20%7B%20default%20as%20pnp%2C%20ItemAddResult%2C%20Web%20%7D%20from%20%22sp-pnp-js%22%3B%3CBR%20%2F%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-115368%22%20slang%3D%22en-US%22%3ERe%3A%20SPFX%20%26gt%3B%20pnp.sp%20reference%20in%20React%20project%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-115368%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F55998%22%20target%3D%22_blank%22%3E%40Maggan%20W%C3%A5hlin%3C%2FA%3E.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EYes%20I%20did.%20Double%20checked%20it%20in%20Visual%20Studio%20Code.%20Sp.pnp.js%20is%20under%20%22node_modules%22%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%2C%20Mike%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-115367%22%20slang%3D%22en-US%22%3ERe%3A%20SPFX%20%26gt%3B%20pnp.sp%20reference%20in%20React%20project%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-115367%22%20slang%3D%22en-US%22%3E%3CP%3EHave%20you%20installed%20the%20sp-pnp-js%20package%3F%3CBR%20%2F%3E%3CBR%20%2F%3Enpm%20install%20sp-pnp-js%20--save%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Regular Contributor

I have a working SPFX project using pnp.sp.search (without an additional javascript framework).

I import pnp.sp like this in my webparts.ts file :

import * as pnp from 'sp-pnp-js';
import { SearchQuery, SearchResults } from "sp-pnp-js";

All my coding is done within this file.

Now I want to do some testing using React.

So I create a new project using the react framework.

 

I reference the same way (in my webparts.ts file) but do the coding in the components/blabla.tsx file.

This is not working. I get an error "cannot find pnp".

 

When I import pnp.sp in the components/blabla.tsx file I get even more errors telling me, for example, "Argument of type ''Element" is not assignable to parameter f type 'string'.

 

So how do I Import pnp.sp in a React project?

 

 

15 Replies
Highlighted

Have you installed the sp-pnp-js package?

npm install sp-pnp-js --save

Highlighted

Hi @Maggan Wåhlin.

 

Yes I did. Double checked it in Visual Studio Code. Sp.pnp.js is under "node_modules"

 

Thanks, Mike

Highlighted
I reference the package this way:

import { default as pnp, ItemAddResult, Web } from "sp-pnp-js";
Highlighted

Tried that but no luck sofar. Maybe my code is wrong in some way. I just copied it from my working project. Like this:

import { default as pnp, ItemAddResult, Web } from "sp-pnp-js";
import { SearchQuery, SearchResults } from "sp-pnp-js";

import * as React from 'react';
import styles from './Reactsearch.module.scss';
import { IReactsearchProps } from './IReactsearchProps';
import { escape } from '@microsoft/sp-lodash-subset';

export default class Reactsearch extends React.Component<IReactsearchProps, {}> {
  
  private GetSearchresults(): void {
    pnp.sp.search(<SearchQuery>{
     Querytext: "ContentType:TEST_matters",
     RowLimit: 10,
     EnableInterleaving: true,
     SelectProperties: ["RefinableString10", "CreatedBy","Created"], 
     RefinementFilters: ["RefinableString18:equals('false')"],
     }).then((result: SearchResults) => {
       var props = result.PrimarySearchResults;
       debugger;
   
    var propValue = "";
    var counter = 1;
    props.forEach(function(object) {
    propValue += counter++ +'. Title - ' +object.RefinableString10 +"<br/>"+"Rank - " + object.Rank
     +"<br/>"+"File Type - " + object.FileType+"<br/>"+ "Original Path - "
     +object.OriginalPath +"<br/>"+" Summary - "+ object.HitHighlightedSummary +
     "<br/>"+"<br/>";
    });
    document.getElementById("spSearchresults").innerHTML = propValue;
    }).catch(function(err) {
    console.log("Error: " + err);
    });
   
    }



  public render(): React.ReactElement<IReactsearchProps> {
    return (
      <div className={styles.reactsearch}>
        <div className={styles.container}>
          <div className={`ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}`}>
            <div className="ms-Grid-col ms-lg10 ms-xl8 ms-xlPush2 ms-lgPush1">
              <span className="ms-font-xl ms-fontColor-white">Welcome to SharePoint!</span>
              <p className="ms-font-l ms-fontColor-white">Customize SharePoint experiences using Web Parts.</p>
              <p className="ms-font-l ms-fontColor-white">{escape(this.props.description)}</p>
              <a href="https://aka.ms/spfx" className={styles.button}>
                <span className={styles.label}>Learn more</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

This is the .tsx file. I also did the same import in the webpart.ts file.

Highlighted
Maybe it is a package dependency issue? Check your versions in package.json. This is my config:

{
"name": "order-webpart",
"version": "0.0.1",
"private": true,
"engines": {
"node": ">=0.10.0"
},
"dependencies": {
"@microsoft/sp-core-library": "~1.1.0",
"@microsoft/sp-webpart-base": "~1.1.1",
"@types/react": "0.14.46",
"@types/react-addons-shallow-compare": "0.14.17",
"@types/react-addons-test-utils": "0.14.15",
"@types/react-addons-update": "0.14.14",
"@types/react-dom": "0.14.18",
"@types/webpack-env": ">=1.12.1 <1.14.0",
"jquery": "^2.2.4",
"react": "15.4.2",
"react-dom": "15.4.2",
"sp-pnp-js": "^3.0.1"
},
"devDependencies": {
"@microsoft/sp-build-web": "~1.1.0",
"@microsoft/sp-module-interfaces": "~1.1.0",
"@microsoft/sp-webpart-workbench": "~1.1.0",
"gulp": "~3.9.1",
"@types/chai": ">=3.4.34 <3.6.0",
"@types/mocha": ">=2.2.33 <2.6.0"
},
"scripts": {
"build": "gulp bundle",
"clean": "gulp clean",
"test": "gulp test"
}
}


Highlighted
Hmm, I do not have a "package.json" in my project. Should that be under the "Config" folder?.
I do have a "package-solution.json" but I'm not allowed to create any "dependencies" there.
Highlighted

The file should be at the root:

 

Capture.PNG

 

 

If you installed the solution through the yeoman generator it should be there.

 

Highlighted
Ah, sorry.
Got it, thanks
Highlighted

Apart from using the 1.3 version of the framework, I do not notice any difference.

 

{
  "name": "react-search",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "@microsoft/sp-core-library": "~1.3.0",
    "@microsoft/sp-lodash-subset": "~1.3.0",
    "@microsoft/sp-webpart-base": "~1.3.0",
    "@types/react": "15.0.38",
    "@types/react-addons-shallow-compare": "0.14.17",
    "@types/react-addons-test-utils": "0.14.15",
    "@types/react-addons-update": "0.14.14",
    "@types/react-dom": "0.14.18",
    "@types/webpack-env": ">=1.12.1 <1.14.0",
    "react": "15.4.2",
    "react-dom": "15.4.2",
    "sp-pnp-js": "^3.0.1"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "~1.3.0",
    "@microsoft/sp-module-interfaces": "~1.3.0",
    "@microsoft/sp-webpart-workbench": "~1.3.0",
    "gulp": "~3.9.1",
    "@types/chai": ">=3.4.34 <3.6.0",
    "@types/mocha": ">=2.2.33 <2.6.0"
  }
}
Highlighted
There are some differences in the types definitions. You could just try to use my config and run npm install. That should verify any incompatibilities.

If you still don´t get it working, I rest my case ;)
Highlighted

@Maggan WåhlinThanks for all your suggestions. But unfortunately, no luck.

 

I notice thing go wrong on "SearchQuery"

private GetSearchresults(): void {
    pnp.sp.search(<SearchQuery>)
  
  }  

Jsx element "SearchQuery" has no corresponding closing tag ????? 

I'll will do some more testing. Hope I can post the solution soon ;)

Highlighted
Good luck :)

"In JSX, <MyComponent /> alone is valid while <MyComponent> isn't. All tags must be closed, either with the self-closing format or with a corresponding closing tag (</MyComponent>)."



Highlighted

The stange thing is that when I right-mouse click om "SearchQuery" it does not find a definition.

I imported it like this:

import { SearchQuery, SearchResults } from 'sp-pnp-js';

SearchResults, however, does go to the right definition

Highlighted
If you haven´t read this, it might help.

https://github.com/SharePoint/PnP-JS-Core/wiki/Working-With:-Search

You can use several methods to achieve what you need. In my web part, I don´t use SearchQuery:

pnp.sp.search(this.props.searchText).then((r: SearchResults) => {
// do something
});
Highlighted

Thanks, will have a look.

However, my search is somewhat more complex. Need a refinement and some more properties in my result. Have not figured out how to achieve that with you syntax. Is this possible using your syntax?