Sp-dev-docs: Cannot shrinkwrap npm packages of a webpart solution generated with the yeoman generator 1.3.2

[lucmoco]

Category

• [ ] Question
• [ ] Typo
• [X] Bug
• [ ] Additional article idea

Expected or Desired Behavior

After scaffolding an SPFx webpart solution with the yeoman generator, one can generate an npm-shrinkwrap.json file in order to fix the node_modules tree.

Background information

The use of an npm-shrinkwrap.json file has been recommended for example by Chris O'Brien (see Avoiding dependency issues in SharePoint Framework (SPFx) development).

Our team has had a regression in the past where an SPFx solution didn't build anymore with a fresh install, among others on our build server. A new version of an indirectly referenced npm package had been released, which broke the solution. We thus decided to work with the npm-shrinkwrap.json file, but this approach has been unsuccessful until now with the yeoman generator 1.3.x.

We work with npm 4 (since npm 5 is not yet supported by the SPFx framework), but it's interesting to see that npm 5 generates a package-lock.json file by default. In npm 5, package-lock.json is usually the replacement of npm-shrinkwrap.json. The npm team recommends the use of a package lock file:

It is highly recommended you commit the generated package lock to source control: this will allow anyone else on your team, your deployments, your CI/continuous integration, and anyone else who runs npm install in your package source to get the exact same dependency tree that you were developing on. Additionally, the diffs from these changes are human-readable and will inform you of any changes npm has made to your node_modules, so you can notice if any transitive dependencies were updated, hoisted, etc.

Observed Behavior

When generating a react webpart with the yeoman generator 1.3.2 and npm 4, I cannot generate a shrinkwrap.json file. The command npm shrinkwrap fails with the following error:

npm ERR! Problems were encountered
npm ERR! Please correct and try again.
npm ERR! peer invalid: ajv@>=5.0.0, required by [email protected]

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\lmc\AppData\Roaming\npm-cache\_logs\2017-10-06T13_09_29_960Z-debug.log

Here is the content of the file C:\Users\lmc\AppData\Roaming\npm-cache\_logs\2017-10-06T13_09_29_960Z-debug.log:

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Users\\lmc\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'shrinkwrap' ]
2 info using [email protected]
3 info using [email protected]
4 info lifecycle [email protected]~preshrinkwrap: [email protected]
5 silly lifecycle [email protected]~preshrinkwrap: no script for preshrinkwrap, continuing
6 info lifecycle [email protected]~shrinkwrap: [email protected]
7 silly lifecycle [email protected]~shrinkwrap: no script for shrinkwrap, continuing
8 verbose stack Error: Problems were encountered
8 verbose stack Please correct and try again.
8 verbose stack peer invalid: ajv@>=5.0.0, required by [email protected]
8 verbose stack     at shrinkwrap_ (C:\Users\lmc\AppData\Roaming\npm\node_modules\npm\lib\shrinkwrap.js:128:15)
8 verbose stack     at Array.<anonymous> (C:\Users\lmc\AppData\Roaming\npm\node_modules\npm\node_modules\slide\lib\bind-actor.js:15:8)
8 verbose stack     at LOOP (C:\Users\lmc\AppData\Roaming\npm\node_modules\npm\node_modules\slide\lib\chain.js:15:14)
8 verbose stack     at C:\Users\lmc\AppData\Roaming\npm\node_modules\npm\node_modules\slide\lib\chain.js:18:7
8 verbose stack     at done (C:\Users\lmc\AppData\Roaming\npm\node_modules\npm\lib\utils\lifecycle.js:132:5)
8 verbose stack     at LOOP (C:\Users\lmc\AppData\Roaming\npm\node_modules\npm\node_modules\slide\lib\chain.js:7:26)
8 verbose stack     at C:\Users\lmc\AppData\Roaming\npm\node_modules\npm\node_modules\slide\lib\chain.js:18:7
8 verbose stack     at C:\Users\lmc\AppData\Roaming\npm\node_modules\npm\lib\utils\lifecycle.js:329:20
8 verbose stack     at C:\Users\lmc\AppData\Roaming\npm\node_modules\npm\node_modules\graceful-fs\polyfills.js:284:29
8 verbose stack     at FSReqWrap.oncomplete (fs.js:123:15)
9 verbose cwd C:\Users\lmc\Documents\projects\2014-04 CFF\src\test\MySpfxSolution
10 verbose Windows_NT 10.0.14393
11 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\lmc\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "shrinkwrap"
12 verbose node v6.11.2
13 verbose npm  v4.6.1
14 error Problems were encountered
14 error Please correct and try again.
14 error peer invalid: ajv@>=5.0.0, required by [email protected]
15 verbose exit [ 1, true ]

Also, if I run npm list --depth=0, I get the following error:

npm ERR! peer dep missing: ajv@>=5.0.0, required by [email protected]

Steps to Reproduce

Do NOT install @microsoft/generator-sharepoint globally (see Why you should consider installing the SharePoint Framework Yeoman generator locally), and run the following commands:

mkdir demo-bug
cd demo-bug
npm install @microsoft/[email protected]
yo @microsoft/sharepoint --solutionName "MySpfxSolution" --framework "react" --componentType "webpart" --componentName "MySpfxSolution" --componentDescription "MySpfxSolution web part" --environment "spo" skipFeatureDeployment false
rm -rf node_modules
cd MySpfxSolution
npm shrinkwrap

The second error mentioned is encountered when running

npm list --depth=0

Environment information

> npm list -g --depth=0

[email protected]
[email protected]
[email protected]

[michel-weber]

@lucmoco I think this is related to:
🐞 Generator v1.3 missing peer dependency? #890

[lucmoco]

@michel-weber you're right. It's likely the same problem. Two remarks:

• #890 was opened with the generator 1.3.1, so the issue has not been fixed with 1.3.2
• The npm list --depth=0 problem is not nice but it's not critical as the web part can still be generated. However the npm shrinkwrap problem is a show-stopper for us, which prevents us from using 1.3.x features.

[iclanton]

This has been fixed and should be released in a patch soon.

You can work around this by adding "ajv" as a devDependency to your project.

[lucmoco]

I can confirm that the SharePoint Generator v. 1.3.4 fixes this problem.

Thanks for the good work !

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues