Forum Discussion

Mike Jansen's avatar
Mike Jansen
Iron Contributor
Oct 25, 2017

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

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?

  • 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.

  • Mike Jansen's avatar
    Mike Jansen
    Iron Contributor

    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.

Resources