search

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.44k stars 2.13k forks source link

Issue when adding Auth module with aws-sdk and webpack #11295

Closed orlaqp closed 1 year ago

orlaqp commented 1 year ago

Before opening, please confirm:

JavaScript Framework

React

Amplify APIs

Authentication

Amplify Categories

auth, hosting

Environment information

``` System: OS: macOS 12.6.3 CPU: (12) x64 Intel(R) Core(TM) i5-10600 CPU @ 3.30GHz Memory: 1.71 GB / 64.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 19.5.0 - /usr/local/bin/node Yarn: 1.22.5 - ~/.yarn/bin/yarn npm: 9.3.1 - /usr/local/bin/npm Watchman: 2023.01.23.00 - /usr/local/bin/watchman Browsers: Chrome: 112.0.5615.137 Firefox: 102.0.1 Safari: 16.3 npmPackages: %name%: 0.1.0 @aws-cdk/dns_validated_certificate_handler: 0.0.0 @aws-sdk/client-dynamodb: ^3.294.0 => 3.316.0 @aws-sdk/lib-dynamodb: ^3.294.0 => 3.316.0 @babel/preset-react: ^7.14.5 => 7.18.6 @bincrafters/nx-aws-cdk: ^0.0.11 => 0.0.11 @casl/ability: ^6.4.0 => 6.4.0 @casl/ability/extra: undefined () @casl/react: ^3.1.0 => 3.1.0 @commitlint/cli: ^17.6.1 => 17.6.1 @commitlint/config-conventional: ^17.6.1 => 17.6.1 @commitlint/config-nx-scopes: ^17.4.3 => 17.4.3 @commitlint/cz-commitlint: ^17.5.0 => 17.5.0 @cypress/angular: 0.0.0-development @cypress/mount-utils: 0.0.0-development @cypress/react: 0.0.0-development @cypress/react18: 0.0.0-development @cypress/svelte: 0.0.0-development @cypress/vue: 0.0.0-development @cypress/vue2: 0.0.0-development @emotion/cache: ^11.10.7 => 11.10.7 @emotion/react: ^11.10.6 => 11.10.6 @emotion/styled: ^11.10.6 => 11.10.6 @hookform/resolvers: ^3.1.0 => 3.1.0 @hookform/resolvers/ajv: 1.0.0 @hookform/resolvers/arktype: 1.0.0 @hookform/resolvers/class-validator: 1.0.0 @hookform/resolvers/computed-types: 1.0.0 @hookform/resolvers/io-ts: 1.0.0 @hookform/resolvers/joi: 1.0.0 @hookform/resolvers/nope: 1.0.0 @hookform/resolvers/superstruct: 1.0.0 @hookform/resolvers/typanion: 1.0.0 @hookform/resolvers/typebox: 1.0.0 @hookform/resolvers/vest: 1.0.0 @hookform/resolvers/yup: 1.0.0 @hookform/resolvers/zod: 1.0.0 @iconify/iconify: ^3.1.0 => 3.1.0 @iconify/iconify/offline: undefined () @iconify/json: ^2.2.52 => 2.2.52 @iconify/react: ^4.1.0 => 4.1.0 @iconify/react/offline: undefined () @iconify/tools: ^2.2.6 => 2.2.6 @iconify/types: ^2.0.0 => 2.0.0 @iconify/utils: ^2.1.5 => 2.1.5 @mui/lab: ^5.0.0-alpha.127 => 5.0.0-alpha.127 @mui/material: ^5.12.1 => 5.12.1 @mui/system: ^5.12.1 => 5.12.1 @mui/utils: ^5.12.0 => 5.12.0 @nrwl/cypress: 15.9.2 => 15.9.2 @nrwl/eslint-plugin-nx: 15.9.2 => 15.9.2 @nrwl/jest: 15.9.2 => 15.9.2 @nrwl/js: 15.9.2 => 15.9.2 @nrwl/linter: 15.9.2 => 15.9.2 @nrwl/react: ^15.9.2 => 15.9.2 @nrwl/web: 15.9.2 => 15.9.2 @nrwl/webpack: 15.9.2 => 15.9.2 @nrwl/workspace: 15.9.2 => 15.9.2 @pmmmwh/react-refresh-webpack-plugin: ^0.5.7 => 0.5.10 @popperjs/core: ^2.11.7 => 2.11.7 @svgr/webpack: ^6.1.2 => 6.5.1 @testing-library/dom: ^9.2.0 => 9.2.0 @testing-library/react: 14.0.0 => 14.0.0 @types/aws-lambda: ^8.10.114 => 8.10.114 @types/cleave.js: ^1.4.7 => 1.4.7 @types/jest: ^29.4.0 => 29.5.1 @types/joi: ^17.2.3 => 17.2.3 @types/jsonwebtoken: ^9.0.1 => 9.0.1 @types/node: ^18.15.12 => 18.15.12 (18.15.11, 14.18.42) @types/payment: ^2.1.4 => 2.1.4 @types/prismjs: ^1.26.0 => 1.26.0 @types/react: 18.0.28 => 18.0.28 (18.0.37) @types/react-credit-cards: ^0.8.1 => 0.8.1 @types/react-dom: 18.0.11 => 18.0.11 @types/react-router-dom: 5.3.3 => 5.3.3 @typescript-eslint/eslint-plugin: ^5.36.1 => 5.59.0 @typescript-eslint/parser: ^5.36.1 => 5.59.0 apexcharts-clevision: ^3.28.5 => 3.28.5 aws-amplify: ^5.1.3 => 5.1.3 aws-cdk: ^2.69.0 => 2.76.0 aws-cdk-lib: ^2.69.0 => 2.76.0 axios: ^1.3.6 => 1.3.6 (0.26.0) babel-jest: ^29.4.1 => 29.5.0 (28.1.3) chart.js: ^4.2.1 => 4.2.1 chart.js-auto: undefined () chart.js-helpers: undefined () cleave.js: ^1.6.0 => 1.6.0 clipboard-copy: ^4.0.1 => 4.0.1 clsx: ^1.2.1 => 1.2.1 commitizen: ^4.3.0 => 4.3.0 constructs: ^10.1.164 => 10.2.3 crypto-browserify: ^3.12.0 => 3.12.0 cypress: ^12.2.0 => 12.10.0 date-fns: ^2.29.3 => 2.29.3 eslint: ~8.15.0 => 8.15.0 eslint-config-prettier: 8.1.0 => 8.1.0 eslint-plugin-cdk: ^1.8.0 => 1.8.0 eslint-plugin-cypress: ^2.10.3 => 2.13.2 eslint-plugin-import: 2.27.5 => 2.27.5 eslint-plugin-jsx-a11y: 6.7.1 => 6.7.1 eslint-plugin-react: 7.32.2 => 7.32.2 eslint-plugin-react-hooks: 4.6.0 => 4.6.0 history: ^5.3.0 => 5.3.0 husky: ^8.0.0 => 8.0.3 i18next: ^22.4.15 => 22.4.15 i18next-browser-languagedetector: ^7.0.1 => 7.0.1 i18next-http-backend: ^2.2.0 => 2.2.0 inquirer: 8 => 8.2.5 jest: ^29.4.1 => 29.5.0 jest-environment-jsdom: ^29.4.1 => 29.5.0 jest-environment-node: ^29.4.1 => 29.5.0 (28.1.3) joi: ^17.9.0 => 17.9.1 jsonwebtoken: ^9.0.0 => 9.0.0 keen-slider: ^6.8.5 => 6.8.5 lint-staged: ^13.2.1 => 13.2.1 nx: 15.9.2 => 15.9.2 payment: ^2.4.6 => 2.4.6 prettier: ^2.6.2 => 2.8.7 prismjs: ^1.29.0 => 1.29.0 react: 18.2.0 => 18.2.0 react-apexcharts: ^1.4.0 => 1.4.0 react-chartjs-2: ^5.2.0 => 5.2.0 react-credit-cards: ^0.8.3 => 0.8.3 react-dom: 18.2.0 => 18.2.0 react-dropzone: ^14.2.3 => 14.2.3 react-hook-form: ^7.43.9 => 7.43.9 react-hot-toast: ^2.4.0 => 2.4.0 react-i18next: ^12.2.0 => 12.2.0 react-perfect-scrollbar: ^1.5.8 => 1.5.8 react-popper: ^2.3.0 => 2.3.0 react-refresh: ^0.10.0 => 0.10.0 react-router-dom: 6.8.1 => 6.8.1 react-test-renderer: 18.2.0 => 18.2.0 stylis-plugin-rtl: ^2.1.1 => 2.1.1 ts-jest: ^29.0.5 => 29.1.0 ts-node: 10.9.1 => 10.9.1 tslib: ^2.3.0 => 2.5.0 (1.14.1) typescript: ~4.9.5 => 4.9.5 (5.0.4) url-loader: ^4.1.1 => 4.1.1 npmGlobalPackages: aws-cdk: 2.69.0 newman: 5.3.2 npm: 9.3.1 ```

Describe the bug

I have set up a workspace using Nx where I have two micro-frontend applications both using React and Amplify. I am already using the hosting module from Amplify in both projects with no issues but as soon as I added the auth package and try just the following: 

import { Amplify } from 'aws-amplify';
import { environment } from './environments/environment'; // this environment file has the same content of aws-exports.js
Amplify.configure(environment);

I get a lot of errors from compiling the code (check the logs section below)

Expected behavior

The application should compile correctly and i should not throw these exceptions when compiling the code

Reproduction steps

  1. Create nx workspace npx create-nx-workspace --packageManager=yarn
  2. Follow the options on the screen a select a monorepo version with a react app in it
  3. Navigate to the app/ you create
  4. Execute amplify init
  5. Add hosting feature with dev options, no need to use HTTPS: amplify add hosting
  6. Add Auth feature: amplify add auth
  7. Copy the aws-export content to your environments/environment.ts file
  8. Add the following code to your react's main.ts file: 
    import { Amplify } from 'aws-amplify';
import { environment } from './environments/environment';
Amplify.configure(environment);
  9. Try to run the app: nx serve <name of your app>

Code Snippet

Sample repo: https://github.com/orlaqp/amplify-test

Log output

``` nx serve ui > nx run ui:serve:development [webpack-dev-server] Project is running at: [webpack-dev-server] Loopback: http://localhost:4200/, http://[::1]:4200/ [webpack-dev-server] 404s will fallback to '/index.html' > NX Web Development Server is listening at http://localhost:4200/ Entrypoint main = runtime.js vendor.js main.js 3 auxiliary assets chunk (runtime: runtime) main.js (main) 52.9 KiB [initial] [rendered] chunk (runtime: runtime) runtime.js (runtime) 33.8 KiB [entry] [rendered] chunk (runtime: runtime) vendor.js (vendor) (id hint: vendor) 13.2 MiB [initial] [rendered] split chunk (cache group: vendor) (name: vendor) WARNING in ../../node_modules/@aws-sdk/client-lex-runtime-service/node_modules/@aws-sdk/util-user-agent-node/dist-cjs/is-crt-available.js 6:96-114 Module not found: Error: Can't resolve 'aws-crt' in '/Users/orlaqp/development/test-arena/amplify/amplify-test/node_modules/@aws-sdk/client-lex-runtime-service/node_modules/@aws-sdk/util-user-agent-node/dist-cjs' WARNING in ../../node_modules/@aws-sdk/client-lex-runtime-v2/node_modules/@aws-sdk/util-user-agent-node/dist-cjs/is-crt-available.js 6:96-114 Module not found: Error: Can't resolve 'aws-crt' in '/Users/orlaqp/development/test-arena/amplify/amplify-test/node_modules/@aws-sdk/client-lex-runtime-v2/node_modules/@aws-sdk/util-user-agent-node/dist-cjs' WARNING in ../../node_modules/@aws-sdk/client-location/node_modules/@aws-sdk/util-user-agent-node/dist-cjs/is-crt-available.js 6:96-114 Module not found: Error: Can't resolve 'aws-crt' in '/Users/orlaqp/development/test-arena/amplify/amplify-test/node_modules/@aws-sdk/client-location/node_modules/@aws-sdk/util-user-agent-node/dist-cjs' WARNING in ../../node_modules/@aws-sdk/client-pinpoint/node_modules/@aws-sdk/util-user-agent-node/dist-cjs/is-crt-available.js 6:96-114 Module not found: Error: Can't resolve 'aws-crt' in '/Users/orlaqp/development/test-arena/amplify/amplify-test/node_modules/@aws-sdk/client-pinpoint/node_modules/@aws-sdk/util-user-agent-node/dist-cjs' .... more errors not shown here ... ```

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-east-1",
    "aws_content_delivery_bucket": "amplifyest-20230424155222-hostingbucket-dev",
    "aws_content_delivery_bucket_region": "us-east-1",
    "aws_content_delivery_url": "http://amplifyest-20230424155222-hostingbucket-dev.s3-website-us-east-1.amazonaws.com"
};

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

tannerabread commented 1 year ago

Hi @orlaqp can you try the config in your webpack listed in this comment and see if it solves your issue? I wasn't set up as a monorepo when doing this testing but it seemed like the webpack config did not work by default anymore after a certain version of Nx

nadetastic commented 1 year ago

Related to https://github.com/aws-amplify/amplify-js/issues/11257#issuecomment-1522111723

  • © Githubissues.
  • Githubissues is a development platform for aggregating issues.