Forum Discussion
SPFX > pnp.sp reference in React project
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 { SearchQ...
Ah, sorry.
Got it, thanks
Got it, thanks
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"
}
}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?
- 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
}); 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
- 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>)." 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 ;-)
- 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 ;-)
