Sp-dev-docs: gulp bundle fails after adding a field customizer to a project with web part

[waldekmastykarz]

Category

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

Expected or Desired Behavior

It should be possible to build projects with web parts and field customizers.

Observed Behavior

Project with web part builds fine until you add a field customizer. At that point when you try to run gulp bundle you get the following error:

Error - typescript - src/extensions/fieldCustomizer/FieldCustomizerFieldCustomizer.ts(6,7): error TS2307: Cannot find module '@microsoft/sp-listview-extensibility'.
Error - typescript - src/extensions/fieldCustomizer/FieldCustomizerFieldCustomizer.ts(31,45): error TS2339: Property 'properties' does not exist on type 'FieldCustomizerFieldCustomizer'.
Error - typescript - src/extensions/fieldCustomizer/FieldCustomizerFieldCustomizer.ts(40,63): error TS2339: Property 'context' does not exist on type 'FieldCustomizerFieldCustomizer'.

The same error occurs if you add a command set instead of a field customizer.
If you start with the command set and add the web part afterwards, running gulp bundle works just fine.
It seems like this might be an issue with npm@5. After adding the field customizer and having the build error, I wanted to try to restore dependencies using npm i to ensure that nothing's missing. That didn't change anything. Also, removing the node_modules folder and re-running npm i didn't have any effect. However, after deleting the package-lock.json file and running npm i I can build the project as expected. Looking at the package-lock.json file after adding a field customizer or command set to a project with a web part I can confirm, that the @microsoft/sp-listview-extensibility package isn't listed which explains the error. Optionally, you can also run npm i -S @microsoft/sp-listview-extensibility to add the missing package to package-lock.json.

Steps to Reproduce

1. Create new project using generator v1.1.0
2. Add a web part without any JS framework
3. Run gulp bundle to confirm the project is building
4. Run the generator on the existing project to add a new element
5. Add a field customizer without any JS framework
6. Run gulp bundle > error

[iclanton]

We don't yet support npm@5. Can you use version 4 for now?

Can you also clarify - is @microsoft/sp-listview-extensibility missing from your package.json or did it get added and just not installed correctly? Does this issue repro on npm@4?

[waldekmastykarz]

It was added in package.json just not installed by the generator. If npm@5 is not supported, then it would be good to mention it in the documentation.

[VesaJuvonen]

Updated notes around node v5 in the docs - https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment. Closing this one for now.

[waldekmastykarz]

This seems to be working correctly on node v8.9.0 and npm v5.5.1

[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