Sp-dev-fx-webparts: angular-msgraph sample - unable to bundle --ship: issue with HelloJS and UglifyJS

[luismanez]

Category

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

Expected or Desired Behavior

You can run "gulp bundle --ship" without any issue

Observed Behavior

When running "gulp bundle --ship" with latest spfx version, you get a weird issue from Webpack and UglifyJS:

"
Error - [webpack] 'dist':
ms-graph.bundle.js from UglifyJs
SyntaxError: Unexpected token: name (hello) [./~/source-map-loader!./lib/webparts/msGraph/app/aad.js:1,0]
"

Steps to Reproduce

Clone project and follow install instructions, then run "gulp bundle --ship" (without the --ship argument the bundle task works).

Thanks for your help.

[waldekmastykarz]

The problem seems to be with the use of the let keyword (https://github.com/SharePoint/sp-dev-fx-webparts/blob/dbd7d66ff60ed18bca4f3754447bfe089dd3d9d1/samples/angular-msgraph/src/webparts/msGraph/app/aad.js#L1) which isn't a part of the ES5 standard and isn't supported by UglifyJS. In TS files, let is replaced var in the transpilation process. As the adal.js file has the .js extension, it isn't processed by TypeScript and let is passed as-is to UglifyJS which causes it to break. To fix the error, you should replace let with var.

[Danny-Engelman]

To fix the error, you should replace let with var.

Can adal.js be renamed to adal.ts ? So TypeScript does the job? (yes I am lazy)

[waldekmastykarz]

Yes, you could do that too.

[luismanez]

ouch! shame on me! didn't figure that out. yeah, I just renamed the file to .ts, and bundle --ship works as expected. Thanks for you help @waldekmastykarz !

[waldekmastykarz]

You're welcome @luismanez