Expected identifier but found "=", unable to publish app

[joshuaMarple]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Angular

Amplify APIs

Authentication, GraphQL API

Amplify Categories

auth, storage, hosting

Environment information

  System:
    OS: Linux 5.15 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 7.00 GB / 7.67 GB
    Container: Yes
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 20.2.0 - /usr/bin/node
    npm: 9.6.6 - /usr/bin/npm
  npmPackages:
    @angular-devkit/build-angular: ^16.0.4 => 16.0.4
    @angular/animations: ^16.0.0 => 16.0.4
    @angular/cli: ~16.0.4 => 16.0.4
    @angular/common: ^16.0.0 => 16.0.4
    @angular/compiler: ^16.0.0 => 16.0.4
    @angular/compiler-cli: ^16.0.0 => 16.0.4
    @angular/core: ^16.0.0 => 16.0.4
    @angular/forms: ^16.0.0 => 16.0.4
    @angular/platform-browser: ^16.0.0 => 16.0.4
    @angular/platform-browser-dynamic: ^16.0.0 => 16.0.4
    @angular/router: ^16.0.0 => 16.0.4
    @aws-amplify/ui-angular: ^3.2.18 => 3.2.18
    @types/jasmine: ~4.3.0 => 4.3.2
    aws-amplify: ^5.2.4 => 5.2.4
    jasmine-core: ~4.6.0 => 4.6.0
    karma: ~6.4.0 => 6.4.2
    karma-chrome-launcher: ~3.2.0 => 3.2.0
    karma-coverage: ~2.2.0 => 2.2.0
    karma-coverage-coffee-example:  1.0.0
    karma-jasmine: ~5.1.0 => 5.1.0
    karma-jasmine-html-reporter: ~2.0.0 => 2.0.0
    rxjs: ~7.8.0 => 7.8.1
    rxjs/ajax:  undefined ()
    rxjs/fetch:  undefined ()
    rxjs/operators:  undefined ()
    rxjs/testing:  undefined ()
    rxjs/webSocket:  undefined ()
    tslib: ^2.3.0 => 2.5.3 (2.5.0, 1.14.1, 2.3.1, 2.4.1)
    typescript: ~5.0.2 => 5.0.4
    zone-mix:  undefined ()
    zone-node:  undefined ()
    zone-testing:  undefined ()
    zone.js: ~0.13.0 => 0.13.0
    zone.js/async-test:  undefined ()
    zone.js/async-test.min:  undefined ()
    zone.js/fake-async-test:  undefined ()
    zone.js/fake-async-test.min:  undefined ()
    zone.js/jasmine-patch:  undefined ()
    zone.js/jasmine-patch.min:  undefined ()
    zone.js/long-stack-trace-zone:  undefined ()
    zone.js/long-stack-trace-zone.min:  undefined ()
    zone.js/mocha-patch:  undefined ()
    zone.js/mocha-patch.min:  undefined ()
    zone.js/proxy:  undefined ()
    zone.js/proxy.min:  undefined ()
    zone.js/sync-test:  undefined ()
    zone.js/sync-test.min:  undefined ()
    zone.js/task-tracking:  undefined ()
    zone.js/task-tracking.min:  undefined ()
    zone.js/webapis-media-query:  undefined ()
    zone.js/webapis-media-query.min:  undefined ()
    zone.js/webapis-notification:  undefined ()
    zone.js/webapis-notification.min:  undefined ()
    zone.js/webapis-rtc-peer-connection:  undefined ()
    zone.js/webapis-rtc-peer-connection.min:  undefined ()
    zone.js/webapis-shadydom:  undefined ()
    zone.js/webapis-shadydom.min:  undefined ()
    zone.js/wtf:  undefined ()
    zone.js/wtf.min:  undefined ()
    zone.js/zone-bluebird:  undefined ()
    zone.js/zone-bluebird.min:  undefined ()
    zone.js/zone-error:  undefined ()
    zone.js/zone-error.min:  undefined ()
    zone.js/zone-legacy:  undefined ()
    zone.js/zone-legacy.min:  undefined ()
    zone.js/zone-patch-canvas:  undefined ()
    zone.js/zone-patch-canvas.min:  undefined ()
    zone.js/zone-patch-cordova:  undefined ()
    zone.js/zone-patch-cordova.min:  undefined ()
    zone.js/zone-patch-electron:  undefined ()
    zone.js/zone-patch-electron.min:  undefined ()
    zone.js/zone-patch-fetch:  undefined ()
    zone.js/zone-patch-fetch.min:  undefined ()
    zone.js/zone-patch-jsonp:  undefined ()
    zone.js/zone-patch-jsonp.min:  undefined ()
    zone.js/zone-patch-message-port:  undefined ()
    zone.js/zone-patch-message-port.min:  undefined ()
    zone.js/zone-patch-promise-test:  undefined ()
    zone.js/zone-patch-promise-test.min:  undefined ()
    zone.js/zone-patch-resize-observer:  undefined ()
    zone.js/zone-patch-resize-observer.min:  undefined ()
    zone.js/zone-patch-rxjs:  undefined ()
    zone.js/zone-patch-rxjs-fake-async:  undefined ()
    zone.js/zone-patch-rxjs-fake-async.min:  undefined ()
    zone.js/zone-patch-rxjs.min:  undefined ()
    zone.js/zone-patch-socket-io:  undefined ()
    zone.js/zone-patch-socket-io.min:  undefined ()
    zone.js/zone-patch-user-media:  undefined ()
    zone.js/zone-patch-user-media.min:  undefined ()
  npmGlobalPackages:
    corepack: 0.17.2
    npm: 9.6.6

Describe the bug

I am seeing the bug as described in #10268.

I have double checked that all of the polyfill settings are being set as defined in https://docs.amplify.aws/start/getting-started/setup/q/integration/angular/.

I can recreate this with just running ng build.

The error goes away if I turn off all optimizations.

The exact error is

Error: Optimization error [main.5f2298ef56d08f8e.js]: ✘ [ERROR] Expected identifier but found "="

    main.5f2298ef56d08f8e.js:61516:5:
      61516 │ var  = __webpack_require__(7592);
            ╵      ^

Expected behavior

I expect the tutorial app to be published

Reproduction steps

I followed exactly the steps in the tutorial.

Code Snippet

// Put your code below this line.

Log output

// Put your logs below this line

aws-exports.js

/* eslint-disable */
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "us-west-2",
// removing keys
    "oauth": {},
    "aws_cognito_username_attributes": [],
    "aws_cognito_social_providers": [],
    "aws_cognito_signup_attributes": [
        "EMAIL"
    ],
    "aws_cognito_mfa_configuration": "OFF",
    "aws_cognito_mfa_types": [
        "SMS"
    ],
    "aws_cognito_password_protection_settings": {
        "passwordPolicyMinLength": 8,
        "passwordPolicyCharacters": []
    },
    "aws_cognito_verification_mechanisms": [
        "EMAIL"
    ]
};


export default awsmobile;

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[joshuaMarple]

Was unable to recreate this in another project, closing.

I believe the step I had missed was adding the amplify npm modules with

npm install --save aws-amplify @aws-amplify/ui-angular

npm start

[joshuaMarple]

Reopening- this is happening after adding authentication and the database backend. I don't have these issues when just creating the default angular app.

[sparteek91]

hi @joshuaMarple
I am also facing the same issue
I am using angular v15
"aws-amplify": "^5.2.4",
"@aws-amplify/ui-angular": "^3.2.18",

[cwomack]

@sparteek91 and @joshuaMarple, can you both check to see if there is another dependency besides aws-amplify that is importing the buffer polyfill (see this comment in issue #10268).

After looking through the angular-cli repo for similar errors, there might be a couple ways we can try to resolve this. Can one of you try deleting your node_modules folder as well as your package-lock.json file, and then reinstalling all dependencies with the npm install command?

[ArturV93]

@sparteek91 and @joshuaMarple, can you both check to see if there is another dependency besides aws-amplify that is importing the buffer polyfill (see this comment in issue #10268).

After looking through the angular-cli repo for similar errors, there might be a couple ways we can try to resolve this. Can one of you try deleting your node_modules folder as well as your package-lock.json file, and then reinstalling all dependencies with the npm install command?

Thanks, it solved the issue

[reesscot]

Can also confirm that deleting node_modules and package-lock.json and running npm install resolves this issue. Seems like an incompatible version of buffer is being included with Angular CLI.

[gerrytsui]

I got the same Optimization Error a week ago and had spent a few days narrowing down the culprits.

It is from a change in @aws-amplify/predictions > 5.1.6 . which I don't reference in my Angular 15 code, but is part of the @aws-amplify/ui-angular

You can bypass the problem with the followin in your package.json, until the underlying problem is fixed ( see pull request #11453 )

"overrides":{
"aws-amplify": {
"@aws-amplify/predictions": "5.1.6"
}
},

[wlee221]

Here's a repro repo: https://github.com/wlee221/angular-amplify-bug. npm install && npm run build will fail.

I could confirm that rollbacking aws-amplify to 5.2.1 (which is right before the buffer commit) fixes this error.

[sandeep-bhaskar]

Yes, we also got the same issue we are using "aws-amplify": "^5.0.25" version. We tried everything with different versions and at last keeping aws-amplify to 5.2.1 fixes this error. No need to remove the package-lock.json as we will lost the track.

[gerrytsui]

Affirmative. Staying with "5.2.1" works.. but I researched further to find the underlying culprit.
I am able to use aws-amplify 5.2.4 ie with "^5.x.x" in package.json , but override with "@aws-amplify/predictions": "5.1.6"

per above. by inserting the following into package.json:

...
"overrides":{
  "aws-amplify": {
    "@aws-amplify/predictions": "5.1.6"
  }
},
...

nadetastic and wlee221 reacted with thumb

[sandeep-bhaskar]

@gerrytsui thank you for sharing that. I am using aws-amplify for only authentication so, is there a way that I can only use aws-amplify/auth library rather getting all the dependencies coming with aws-amplify.

[gerrytsui]

is there a way that I can only use aws-amplify/auth library...

@sandeep-bhaskar , if you need the ui components ( e.g. the Authenticator UI), the ui-angular has aws-amplify as a dependency, so answer is No. We rely on webpack treeshaking, so it is a moot point.

e.g. we don't use Predictions, but it is causing the ng build optimization error.

[sandeep-bhaskar]

@gerrytsui we don't need the ui components, we are using our own custom components. But, we are using federated logins and cognito.
We tried using amazon-cognito-identity-js but this will work only for cognito. It is not supporting federated logins.

[cwomack]

Updating this issue to be a bug and will provide an updates on a fix soon. Temporary workarounds are described in comments above until fix is in place.

[stocaaro]

The proposed fix has been released to npm and testing confirms that the build issue is unreproducible in the example app provided above.

Thank you all for your input on this issue.

[gerrytsui]

Thanks for merging and release to npm. I, too, am confirming our (huge) production app can build without the Optimization error.