SPFX > pnp.sp reference in React project

[Mike Jansen]

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?

[#2]

Have you installed the sp-pnp-js package?

npm install sp-pnp-js --save

[#3]

Hi @Maggan Wåhlin.

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

Thanks, Mike

[#4]

I reference the package this way:

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

[#5]

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.

[#6]

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"
}
}

[#7]

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.

[#8]

The file should be at the root:

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

[#9]

Ah, sorry.
Got it, thanks

[#10]

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"
  }
}

[#11]

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 ;)

[#12]

@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 ;)

[#13]

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>)."

[#14]

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

[#15]

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
});

[#16]

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?