Forum Discussion

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

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...
developer
Extensibility
PnP
Maggan Wåhlin's avatar
Maggan Wåhlin
Iron Contributor
Oct 11, 2017
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"
}
}


Mike Jansen's avatar
Mike Jansen
Iron Contributor
Oct 11, 2017
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.
  • Maggan Wåhlin's avatar
    Maggan Wåhlin
    Iron Contributor
    Oct 11, 2017

    The file should be at the root:

     

     

     

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

     

    • Mike Jansen's avatar
      Mike Jansen
      Iron Contributor
      Oct 11, 2017
      Ah, sorry.
      Got it, thanks
      • Mike Jansen's avatar
        Mike Jansen
        Iron Contributor
        Oct 11, 2017

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

Resources