Sp-dev-fx-webparts: Error on saas sub-task on starting project

[markved]

Category

• [ ] Question
• [x] Bug
• [ ] Enhancement

Expected or Desired Behavior

After "cd samples/react-list-form" --> "npm install" and "gulp serve" in terminal window, the build should be successful and serve workbench in the browser.

Observed Behavior

After "cd samples/react-list-form" --> "npm install" and "gulp serve" in terminal window, the build fails with following error:
Error in plugin 'sass'
Message:
srccommon_theming.module.scss
Error: File to import not found or unreadable: node_modules/office-ui-fabric-react/dist/sass/References.
Parent style sheet: c:/SPFx/sp-dev-fx-webparts/samples/react-list-form/src/common/_theming.module.scss
on line 1 of src/common/_theming.module.scss

@import '~office-ui-fabric-react/dist/sass/References';

Steps to Reproduce

• Clone sp-dev-fx-webparts repo
• Open in VS code
• Change directory in terminal window to samples/react-list-form
• run command: npm install
• run command: gulp serve

Submission Guidelines

I tried installing office-ui-fabric-react module but I don't seem to find references in dist sub-directory. npm install in the beginning should have installed any dependency.

[StfBauer]

Do you find the file: _theming.module.scss in the following path?
c:/SPFx/sp-dev-fx-webparts/samples/react-list-form/src/common/

[markved]

Yes, I see the file _theming.module.scss exists in 'common' directory as you mentioned. 1st line in that file reads @import '~office-ui-fabric-react/dist/sass/References';

Interestingly, I did npm install of office-ui-fabric-react and I don't see that error. But now I am getting error that it cannot find microsoft/sp-http module. I tried getting off my company's firewall but it didn't help.

[StfBauer]

Have you checked you node_modules folder? In there you find an 'office-ui-fabric-react' folder.
I cannot reproduce your issue.

What you actually try to do is to make a clean install. Remove the node_modules folder and run npm install once again. Check if you get any warnings beside error.

What you actually can do to is to run:
npm shrinkwrap

before you install all node_modules once again.

[markved]

I did a clean install ensuring 'office-ui-fabric-react' folder exists under node_modules folder. Now, I am getting error as "Cannot find module 'microsoft/sp-http'".

Complete error log:
[11:12:19] Error - typescript - srccommonservicesListFormService.ts(1,73): error TS2307: Cannot find module '@microsoft/sp-http'.
[11:12:19] Error - typescript - srccommonservicesListFormService.ts(24,19): error TS2693: 'Promise' only refers to a type, but is being used as a value here.
[11:12:19] Error - typescript - srccommonservicesListFormService.ts(73,19): error TS2693: 'Promise' only refers to a type, but is being used as a value here.
[11:12:19] Error - typescript - srccommonservicesListFormService.ts(75,19): error TS2693: 'Promise' only refers to a type, but is being used as a value here.
[11:12:19] Error - typescript - srccommonservicesListFormService.ts(122,19): error TS2693: 'Promise' only refers to a type, but is being used as a value here.
[11:12:19] Error - typescript - srccommonservicesListFormService.ts(167,19): error TS2693: 'Promise' only refers to a type, but is being used as a value here.
[11:12:19] Error - typescript - srccommonservicesListService.ts(1,51): error TS2307: Cannot find module '@microsoft/sp-http'.
[11:12:19] Error - typescript - srccommonservicesListService.ts(14,19): error TS2693: 'Promise' only refers to a type, but is being used as a value here.
[11:12:19] Error - typescript - srcwebpartslistFormListFormWebPart.ts(21,28): error TS2307: Cannot find module '@microsoft/sp-lodash-subset'.
[11:12:19] Error - typescript - srcwebpartslistFormListFormWebPart.ts(163,15): error TS2693: 'Promise' only refers to a type, but is being used as a value here.
[11:12:19] Error - typescript - srcwebpartslistFormcomponentsIListFormProps.ts(0,29): error TS2307: Cannot find module '@microsoft/sp-http'.
[11:12:19] Error - typescript - srcwebpartslistFormcomponentsListForm.tsx(217,68): error TS2705: An async function or method in ES5/ES3 requires the 'Promise' constructor. Make sure you have a declaration for the 'Promise' constructor or include 'ES2015' in your --lib option.
[11:12:19] Error - typescript - srcwebpartslistFormcomponentsListForm.tsx(243,79): error TS2705: An async function or method in ES5/ES3 requires the 'Promise' constructor. Make sure you have a declaration for the 'Promise' constructor or include 'ES2015' in your --lib option.
[11:12:19] Error - typescript - srcwebpartslistFormcomponentsListForm.tsx(282,28): error TS2705: An async function or method in ES5/ES3 requires the 'Promise' constructor. Make sure you have a declaration for the 'Promise' constructor or include 'ES2015' in your --lib option.
[11:12:19] Error - typescript - srcwebpartslistFormcomponentsformFieldsFormField.tsx(66,22): error TS2348: Value of type 'typeof Icon' is not callable. Did you mean to include 'new'?
[11:12:22] Error - 'typescript' sub task errored after 8.96 s
TypeScript error(s) occurred.

Note that my machine is setup correctly. I am able to build react sample web parts referencing https://github.com/SharePoint/sp-dev-docs.

[StfBauer]

@markved Can you check the node and npm version you have installed.

For the node version simply execute the following command:
node --version

For the NPM
npm --version

Can you even please post the content of your package-lock.json.

Thank you.

[markved]

Node: v8.11.1
npm: 5.6.0

package-lock.json content too long to post here. I posted it below:
https://github.com/markved/temprepo/blob/master/package-lock.json

This may be trivial but I don't have modern experiences enabled on our site.

[samimansoor]

I'm having a similar error with the same steps to reproduce. Node: v8.10.0, npm: 5.6.0

[TheTrickster1983]

Same behavior here: Node: v8.11.2 , npm: 5.6.0

[StfBauer]

I cannot reproduce it for what so reason ever:
It works on Mac and Windows the exact same way.

Node version: v8.11.2
NPM: 5.6

Just as a quick checkup. These are the following packages installed globally:

+-- @microsoft/[email protected]
+-- [email protected]
+-- [email protected] -> C:\code\generator-simplestyle
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]

This can be listed through the following command:

npm -g list --depth=0

@markved I also checked the package-lock.json and yours and mine are identical.

[markved]

@StfBauer My local machine has following packages installed globally:

C:UsersxxxxxxAppDataRoamingnpm
+-- microsoft/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

I see a few additional ones installed on your machine but those don't seem like relevant ones.

[rishi41]

Same problem on Node: v8.11.1 , npm: 5.6.0

Edit:
Fixed by running:
npm shrinkwrap
npm install

[samimansoor]

I can confirm that the issue is fixed with @rishi41 steps. Running npm shrinkwrap before install did the job for me - thank you @StfBauer

[mag210]

@rishi41 this resolved the issue for me too. Should we run npm shinkwrap against SPFX webparts as a matter of course? Seems a good way to prevent newer packages from causing the webpart to fail on compile time?

[heinrich-ulbricht]

I can also confirm that the issues goes away with @rishi41 steps. Node 10.13.0, npm 6.4.1 on Linux. This unfortunately (?) converts my package-lock.json to npm-shrinkwrap.json. Still not sure which one is better to have.

[SumeetGohil]

@rishi41 thanks a ton.