Oct 11 2017 12:25 AM
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?
Oct 11 2017 01:31 AM - edited Oct 11 2017 01:32 AM
Have you installed the sp-pnp-js package?
npm install sp-pnp-js --save
Oct 11 2017 01:33 AM
Hi @Maggan Wåhlin.
Yes I did. Double checked it in Visual Studio Code. Sp.pnp.js is under "node_modules"
Thanks, Mike
Oct 11 2017 01:35 AM
Oct 11 2017 01:40 AM
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.
Oct 11 2017 01:54 AM
Oct 11 2017 02:05 AM
Oct 11 2017 02:11 AM
The file should be at the root:
If you installed the solution through the yeoman generator it should be there.
Oct 11 2017 02:16 AM
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" } }
Oct 11 2017 02:21 AM
Oct 11 2017 02:36 AM
@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 ;)
Oct 11 2017 03:01 AM
Oct 11 2017 03:15 AM
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
Oct 11 2017 03:51 AM
Oct 11 2017 04:06 AM - edited Oct 11 2017 04:11 AM
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?