Webpack external module gives an error on optimization

Question

I'm new to Node and Angular but I have been tasked with updating an application using them.

When I run ng build --configuration production --base-href on the code I updated I get

Error: Optimization error [main.0a57bb482e1539bc.js]: Error: Transform failed with 1 error:
main.0a57bb482e1539bc.js:78551:5: error: Expected identifier but found "="
    at failureErrorWithLog (C:\Users\[redacted]\node_modules\@angular-devkit\build-angular\node_modules\esbuild\lib\main.js:1493:15)
    at C:\Users\[redacted]\node_modules\@angular-devkit\build-angular\node_modules\esbuild\lib\main.js:1282:29
    at C:\Users\[redacted]\node_modules\@angular-devkit\build-angular\node_modules\esbuild\lib\main.js:629:9
    at handleIncomingPacket (C:\Users\[redacted]\node_modules\@angular-devkit\build-angular\node_modules\esbuild\lib\main.js:726:9)
    at Socket.readFromStdout (C:\Users\[redacted]\node_modules\@angular-devkit\build-angular\node_modules\esbuild\lib\main.js:596:7)
    at Socket.emit (events.js:315:20)
    at addChunk (internal/streams/readable.js:309:12)
    at readableAddChunk (internal/streams/readable.js:284:9)
    at Socket.Readable.push (internal/streams/readable.js:223:10)
    at Pipe.onStreamRead (internal/stream_base_commons.js:188:23)

If I run ng build --configuration production --base-href --optimization false it builds and I can see the line causing the error (main.0a57bb482e1539bc.js:78551) is:

// EXTERNAL MODULE: buffer/
var  = __webpack_require__(7555);

I can tell it's obviously syntactically incorrect.

buffer is being used as a dependency of // CONCATENATED MODULE: ./node_modules/amazon-cognito-identity-js/es/AuthenticationDetails.js

However if I create a new app and use the code import {AuthenticationDetails} from "amazon-cognito-identity-js"; in it I don't have this problem. What I see instead is this line:

/* harmony import */ var buffer__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! buffer */ 7555);

What I would like to know is what is causing my updated code to use // EXTERNAL MODULE: buffer/ and how I can change it to not have the problem maybe by using /* harmony import */.

Angular CLI: 13.0.3 Node: 14.16.1

Answer 1

I had this error after upgrading to angular 13, using cognito and aws-sdk, What worked was removing both package-lock.json and node_modules and running "npm install" again.

Answer 2

Experienced the same build issue when upgrading from Angular 11 -> 12.

Original version - Optimization error

"amazon-cognito-identity-js": "^5.2.4",

Downgraded version - No Optimization error

"amazon-cognito-identity-js": "^3.3.3",

No degradation to the app found by reducing the version. "3.3.3" is the latest stable version of amazon-cognito-identity-js.