aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.41k stars 2.12k forks source link

Error in library after upgrading to Angular 12 #8347

Closed damogallagher closed 3 years ago

damogallagher commented 3 years ago

Before opening, please confirm:

JavaScript Framework

Angular

Amplify APIs

Authentication, Analytics, REST API, Storage, Interactions, PubSub

Amplify Categories

No response

Environment information

``` # Put output below this line System: OS: macOS 11.4 CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Memory: 1.58 GB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node npm: 7.5.4 - ~/.nvm/versions/node/v12.16.1/bin/npm Browsers: Brave Browser: 88.1.20.110 Chrome: 90.0.4430.212 Firefox: 84.0 Safari: 14.1.1 npmPackages: @agm/core: 1.1.0 => 1.1.0 @angular-devkit/build-angular: 12.0.2 => 12.0.2 @angular-eslint/builder: 12.0.0 => 12.0.0 @angular-eslint/eslint-plugin: 12.0.0 => 12.0.0 @angular-eslint/eslint-plugin-template: 12.0.0 => 12.0.0 @angular-eslint/schematics: 12.0.0 => 12.0.0 @angular-eslint/template-parser: 12.0.0 => 12.0.0 @angular/animations: 12.0.2 => 12.0.2 @angular/animations/browser: undefined () @angular/animations/browser/testing: undefined () @angular/cdk: 12.0.2 => 12.0.2 @angular/cdk/a11y: undefined () @angular/cdk/accordion: undefined () @angular/cdk/bidi: undefined () @angular/cdk/clipboard: undefined () @angular/cdk/coercion: undefined () @angular/cdk/collections: undefined () @angular/cdk/drag-drop: undefined () @angular/cdk/keycodes: undefined () @angular/cdk/layout: undefined () @angular/cdk/observers: undefined () @angular/cdk/overlay: undefined () @angular/cdk/platform: undefined () @angular/cdk/portal: undefined () @angular/cdk/scrolling: undefined () @angular/cdk/stepper: undefined () @angular/cdk/table: undefined () @angular/cdk/testing: undefined () @angular/cdk/testing/protractor: undefined () @angular/cdk/testing/selenium-webdriver: undefined () @angular/cdk/testing/testbed: undefined () @angular/cdk/text-field: undefined () @angular/cdk/tree: undefined () @angular/cli: 12.0.2 => 12.0.2 @angular/common: 12.0.2 => 12.0.2 @angular/common/http: undefined () @angular/common/http/testing: undefined () @angular/common/testing: undefined () @angular/common/upgrade: undefined () @angular/compiler: 12.0.2 => 12.0.2 @angular/compiler-cli: 12.0.2 => 12.0.2 @angular/compiler/testing: undefined () @angular/core: 12.0.2 => 12.0.2 @angular/core/testing: undefined () @angular/flex-layout: 12.0.0-beta.34 => 12.0.0-beta.34 @angular/flex-layout/core: undefined () @angular/flex-layout/extended: undefined () @angular/flex-layout/flex: undefined () @angular/flex-layout/grid: undefined () @angular/flex-layout/server: undefined () @angular/forms: 12.0.2 => 12.0.2 @angular/language-service: 12.0.2 => 12.0.2 @angular/material: 12.0.2 => 12.0.2 @angular/material/autocomplete: undefined () @angular/material/autocomplete/testing: undefined () @angular/material/badge: undefined () @angular/material/badge/testing: undefined () @angular/material/bottom-sheet: undefined () @angular/material/bottom-sheet/testing: undefined () @angular/material/button: undefined () @angular/material/button-toggle: undefined () @angular/material/button-toggle/testing: undefined () @angular/material/button/testing: undefined () @angular/material/card: undefined () @angular/material/card/testing: undefined () @angular/material/checkbox: undefined () @angular/material/checkbox/testing: undefined () @angular/material/chips: undefined () @angular/material/chips/testing: undefined () @angular/material/core: undefined () @angular/material/core/testing: undefined () @angular/material/datepicker: undefined () @angular/material/datepicker/testing: undefined () @angular/material/dialog: undefined () @angular/material/dialog/testing: undefined () @angular/material/divider: undefined () @angular/material/divider/testing: undefined () @angular/material/expansion: undefined () @angular/material/expansion/testing: undefined () @angular/material/form-field: undefined () @angular/material/form-field/testing: undefined () @angular/material/form-field/testing/control: undefined () @angular/material/grid-list: undefined () @angular/material/grid-list/testing: undefined () @angular/material/icon: undefined () @angular/material/icon/testing: undefined () @angular/material/input: undefined () @angular/material/input/testing: undefined () @angular/material/list: undefined () @angular/material/list/testing: undefined () @angular/material/menu: undefined () @angular/material/menu/testing: undefined () @angular/material/paginator: undefined () @angular/material/paginator/testing: undefined () @angular/material/progress-bar: undefined () @angular/material/progress-bar/testing: undefined () @angular/material/progress-spinner: undefined () @angular/material/progress-spinner/testing: undefined () @angular/material/radio: undefined () @angular/material/radio/testing: undefined () @angular/material/select: undefined () @angular/material/select/testing: undefined () @angular/material/sidenav: undefined () @angular/material/sidenav/testing: undefined () @angular/material/slide-toggle: undefined () @angular/material/slide-toggle/testing: undefined () @angular/material/slider: undefined () @angular/material/slider/testing: undefined () @angular/material/snack-bar: undefined () @angular/material/snack-bar/testing: undefined () @angular/material/sort: undefined () @angular/material/sort/testing: undefined () @angular/material/stepper: undefined () @angular/material/stepper/testing: undefined () @angular/material/table: undefined () @angular/material/table/testing: undefined () @angular/material/tabs: undefined () @angular/material/tabs/testing: undefined () @angular/material/toolbar: undefined () @angular/material/toolbar/testing: undefined () @angular/material/tooltip: undefined () @angular/material/tooltip/testing: undefined () @angular/material/tree: undefined () @angular/material/tree/testing: undefined () @angular/platform-browser: 12.0.2 => 12.0.2 @angular/platform-browser-dynamic: 12.0.2 => 12.0.2 @angular/platform-browser-dynamic/testing: undefined () @angular/platform-browser/animations: undefined () @angular/platform-browser/testing: undefined () @angular/router: 12.0.2 => 12.0.2 @angular/router/testing: undefined () @angular/router/upgrade: undefined () @aws-amplify/analytics: 5.0.1 => 5.0.1 (4.0.22) @aws-amplify/api: 4.0.1 => 4.0.1 (3.3.3) @aws-amplify/auth: 4.0.1 => 4.0.1 (3.4.34) @aws-amplify/interactions: 4.0.1 => 4.0.1 (3.3.34) @aws-amplify/pubsub: 4.0.1 => 4.0.1 (3.3.3) @aws-amplify/storage: 4.1.0 => 4.1.0 (3.4.4) @aws-amplify/xr: 3.0.1 => 3.0.1 (2.2.34) @kolkov/angular-editor: 1.1.4 => 1.1.4 @sentry/angular: 6.4.1 => 6.4.1 @sentry/tracing: 6.4.1 => 6.4.1 @syncfusion/ej2-angular-base: 19.1.65 => 19.1.65 @syncfusion/ej2-angular-gantt: 19.1.64 => 19.1.64 @types/googlemaps: 3.43.3 => 3.43.3 @types/jasmine: 3.7.5 => 3.7.5 @types/jasminewd2: 2.0.9 => 2.0.9 @types/lodash: 4.14.170 => 4.14.170 @types/node: 15.6.1 => 15.6.1 @typescript-eslint/eslint-plugin: 4.25.0 => 4.25.0 @typescript-eslint/parser: 4.25.0 => 4.25.0 angular-google-charts: 2.2.1 => 2.2.1 angular2-chartjs: 0.5.1 => 0.5.1 aws-amplify-angular: 6.0.1 => 6.0.1 change-case: 4.1.2 => 4.1.2 chart.js: 2.9.4 => 2.9.4 chartjs-plugin-annotation: 0.5.7 => 0.5.7 chartjs-plugin-datalabels: 0.7.0 => 0.7.0 copyfiles: 2.4.1 => 2.4.1 cross-os: 1.4.0 => 1.4.0 eslint: 7.27.0 => 7.27.0 example-typescript: 1.0.0 graphql: 15.5.0 => 15.5.0 (14.0.0) guid-typescript: 1.0.9 => 1.0.9 install: ^0.13.0 => 0.13.0 jasmine-core: 3.7.1 => 3.7.1 (2.8.0) jasmine-spec-reporter: 7.0.0 => 7.0.0 karma: 6.3.2 => 6.3.2 karma-chrome-launcher: 3.1.0 => 3.1.0 karma-coverage-istanbul-reporter: 3.0.3 => 3.0.3 karma-jasmine: 4.0.1 => 4.0.1 karma-jasmine-html-reporter: 1.6.0 => 1.6.0 lib: 0.0.1 lodash: 4.17.21 => 4.17.21 ng-recaptcha: 8.0.0 => 8.0.0 ng2-charts: 2.4.2 => 2.4.2 ngx-cookie-service: 12.0.0 => 12.0.0 ngx-device-detector: 2.1.1 => 2.1.1 ngx-lightbox: 2.3.0 => 2.3.0 ngx-mat-select-search: 3.3.0 => 3.3.0 ngx-material-file-input: 2.1.1 => 2.1.1 node-example: 1.0.0 polylabel: 1.1.0 => 1.1.0 protractor: 7.0.0 => 7.0.0 protractor-example: 1.0.0 rxjs: 7.1.0 => 7.1.0 (6.6.7) rxjs/ajax: undefined () rxjs/fetch: undefined () rxjs/internal-compatibility: undefined () rxjs/operators: undefined () rxjs/testing: undefined () rxjs/webSocket: undefined () sonar-scanner: 3.1.0 => 3.1.0 source-map-explorer: 2.5.2 => 2.5.2 ts: 0.2.2 => 0.2.2 tslib: 2.2.0 => 2.2.0 (1.14.1, 2.1.0) typescript: 4.3.2 => 4.3.2 (4.2.4) typescript-example: 1.0.0 world-countries: 4.0.0 => 4.0.0 xlsx: 0.17.0 => 0.17.0 zone-mix: undefined () zone-node: undefined () zone-testing: undefined () zone.js: 0.11.4 => 0.11.4 (0.10.3) 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: @angular/cli: 12.0.2 markdown-styles: 3.2.0 ng: 0.0.0 nodemon: 2.0.6 npm: 7.5.4 ```

Describe the bug

When I start my angualr project after upgrading to Angular 12 - I get the following error `./node_modules/aws-amplify-angular/ivy_ngcc__/dist/src/components/interactions/chatbot/chatbot.component.core.js:118:0-35 - Error: Module not found: Error: Can't resolve 'util' in '/Users/damiengallagher/Development/sourceControl/c-research/grievance-platform/frontend/node_modules/aws-amplify-angular/ivy_ngcc__/dist/src/components/interactions/chatbot'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:

Expected behavior

Ther application should start up as expected

Reproduction steps

  1. upgraded to Angular 12 and upgraded all libraries to latest version
  2. npm install
  3. npm start

Code Snippet

// Put your code below this line.

Log output

``` // Put your logs below this line ```

aws-exports.js

`import { environment } from 'environments/environment';

const url = require('url');

const projectName = 'my-datalake';

const awsmobile = { aws_app_analytics: 'disable', aws_cognito_identity_pool_id: environment.cognitoIdentityPoolId, aws_cognito_region: environment.awsRegion, aws_content_delivery: 'enable', aws_content_delivery_bucket: environment.s3HostingBucket, aws_content_delivery_bucket_region: environment.awsRegion, aws_content_delivery_cloudfront: 'enable', aws_content_delivery_cloudfront_domain: url.parse(environment.cloudfrontDomainName).hostname || environment.cloudfrontDomainName, aws_mandatory_sign_in: 'enable', aws_project_name: projectName, aws_project_region: environment.awsRegion, aws_sign_in_enabled: 'enable', aws_user_files: 'enable', aws_user_files_s3_bucket: environment.s3UserFilesBucket, aws_user_files_s3_bucket_region: environment.awsRegion, aws_user_pools: 'enable', aws_user_pools_id: environment.cognitoUserPoolId, aws_user_pools_web_client_id: environment.cognitoUserPoolClientId, };

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

damogallagher commented 3 years ago

Issue was resolved for me by following the instructions here

iartemiev commented 3 years ago

Thanks for reporting the issue, @damogallagher. This will be fixed going forward once we merge https://github.com/aws-amplify/amplify-js/pull/8369

github-actions[bot] commented 2 years ago

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.