SOLVED

SPFX - Pnp.sp.search. Simple HelloWorld will not build

%3CLINGO-SUB%20id%3D%22lingo-sub-120790%22%20slang%3D%22en-US%22%3ESPFX%20-%20Pnp.sp.search.%20Simple%20HelloWorld%20will%20not%20build%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-120790%22%20slang%3D%22en-US%22%3E%3CP%3EI%20created%20te%20default%20HelloWorld%20app%20with%20React.%3C%2FP%3E%3CP%3EAdded%20pnp%20(npm%20install%20sp-pnp-js%20--%20save)%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESo%20far%20so%20good.%20Gulp%20serve%20and%20the%20app%20runs%20fine.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ENow%20I%20want%20to%20add%20a%20search%20so%20I%20changed%20the%20HelloWorld.tsx%20like%20this%3A%3C%2FP%3E%3CPRE%3Eimport%20*%20as%20pnp%20from%20'sp-pnp-js'%3B%0Aimport%20%7B%20SearchQuery%20%7D%20from%20'sp-pnp-js'%3B%0Aimport%20%7B%20SearchResults%20%7D%20from%20'sp-pnp-js'%3B%0A%0A.....%0Aexport%20default%20class%20HelloWorld%20extends%20React.Component%3CIHELLOWORLDPROPS%3E%20%7B%0A%0A%20%20private%20GetSearchresults()%3A%20void%20%7B%0A%20%20%20%20pnp.sp.search(%3CSEARCHQUERY%3E%7B%0A%20%20%20%20%20%20Querytext%3A%20%22ContentType%3ATEST_matters%22%2C%0A%20%20%20%20%20%20RowLimit%3A%2010%2C%0A%20%20%20%20%7D).then((result%3A%20SearchResults)%20%3D%26gt%3B%20%7B%0A%20%20%20%0A%20%20%20%20%20%20%20%20var%20props%20%3D%20result.PrimarySearchResults%3B%0A%20%20%20%0A%7D)%3B%0A%20%20%0A%7D%0A%20%20public%20render()%3A%20React.ReactElement%3CIHELLOWORLDPROPS%3E%20%7B%0A%20%20%20%20return%20(%3CBR%20%2F%3E%20Do%20something%3CBR%20%2F%3E)%3B%0A%20%20%7D%0A....%3C%2FIHELLOWORLDPROPS%3E%3C%2FSEARCHQUERY%3E%3C%2FIHELLOWORLDPROPS%3E%3C%2FPRE%3E%3CP%3ENow%20I%20get%20some%20errors%20on%20%22%3CSEARCHQUERY%3E%22%26nbsp%3B%3C%2FSEARCHQUERY%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWhat%20can%20be%20wrong%20here%3F%20Is%20it%20something%20with%20my%20imports%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-120790%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EPnP%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-121071%22%20slang%3D%22en-US%22%3ERe%3A%20SPFX%20-%20Pnp.sp.search.%20Simple%20HelloWorld%20will%20not%20build%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-121071%22%20slang%3D%22en-US%22%3E%3CP%3EUsed%20a%20different%20syntax%20which%20is%20working%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%3Eprivate%20GetSearchresults()%3A%20void%20%7B%0A%20%20%20%20pnp.sp.search(%7B%0A%20%20%20%20%20%20Querytext%3A%20%22ContentType%3ATEST_matters%22%2C%0A%20%20%20%20%20%20RowLimit%3A%205%0A%20%20%20%20%7D).then((result%3A%20SearchResults)%20%3D%26gt%3B%20%7B%0A%20%20%20%20%20%20var%20props%20%3D%20result.PrimarySearchResults%3B%0A%7D)%3B%3C%2FPRE%3E%3CP%3EStill%20do%20not%20understand%20why%20the%20first%20one%20does%20not%20build%20because%20is%20does%20in%20a%20non-react%20example.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Regular Contributor

I created te default HelloWorld app with React.

Added pnp (npm install sp-pnp-js -- save)

 

So far so good. Gulp serve and the app runs fine.

 

Now I want to add a search so I changed the HelloWorld.tsx like this:

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

.....
export default class HelloWorld extends React.Component<IHelloWorldProps, {}> {

  private GetSearchresults(): void {
    pnp.sp.search(<SearchQuery>{
      Querytext: "ContentType:TEST_matters",
      RowLimit: 10,
    }).then((result: SearchResults) => {
   
        var props = result.PrimarySearchResults;
   
});
  
}
  public render(): React.ReactElement<IHelloWorldProps> {
    return (
Do something
); } ....

Now I get some errors on "<SearchQuery>" 

 

What can be wrong here? Is it something with my imports?

1 Reply
Highlighted
Best Response confirmed by Mike Jansen (Regular Contributor)
Solution

Used a different syntax which is working:

 

private GetSearchresults(): void {
    pnp.sp.search({
      Querytext: "ContentType:TEST_matters",
      RowLimit: 5
    }).then((result: SearchResults) => {
      var props = result.PrimarySearchResults;
});

Still do not understand why the first one does not build because is does in a non-react example.