search

aws-amplify / amplify-ui

Amplify UI is a collection of accessible, themeable, performant React (and more!) components that can connect directly to the cloud.
https://ui.docs.amplify.aws
Apache License 2.0
931 stars 297 forks source link

@aws-amplify/ui-react@2.2.1 buttons (in components), or e.g. signOut() from AuthContext stopped working #1226

Closed coderbyheart closed 2 years ago

coderbyheart commented 2 years ago

Before opening, please confirm:

JavaScript Framework

React

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

``` # Put output below this line System: OS: Linux 5.16 Arch Linux CPU: (20) x64 Intel(R) Core(TM) i9-10900 CPU @ 2.80GHz Memory: 24.41 GB / 31.09 GB Container: Yes Shell: 5.8 - /bin/zsh Binaries: Node: 17.3.0 - /usr/bin/node Yarn: 1.22.17 - /usr/bin/yarn npm: 8.4.0 - /usr/bin/npm Browsers: Firefox: 96.0.3 npmPackages: @aws-amplify/ui-react: 2.2.1 => 2.2.1 @aws-amplify/ui-react-internal: undefined () @aws-amplify/ui-react-legacy: undefined () @aws-sdk/client-cloudformation: 3.49.0 => 3.49.0 @aws-sdk/client-cognito-identity-provider: 3.49.0 => 3.49.0 @aws-sdk/client-iot: 3.49.0 => 3.49.0 @aws-sdk/client-iot-data-plane: 3.49.0 => 3.49.0 @aws-sdk/client-ssm: 3.49.0 => 3.49.0 @nordicsemiconductor/asset-tracker-cloud-code-style: 11.0.17 => 11.0.17 @nordicsemiconductor/from-env: 1.0.0 => 1.0.0 @nordicsemiconductor/object-to-env: 4.1.0 => 4.1.0 @nordicsemiconductor/random-words: 6.0.0 => 6.0.0 @playwright/test: 1.18.1 => 1.18.1 @types/chance: 1.1.3 => 1.1.3 @types/feather-icons: 4.7.0 => 4.7.0 @types/intro.js: 3.0.2 => 3.0.2 @types/jest: 27.4.0 => 27.4.0 @types/react: 17.0.38 => 17.0.38 @types/react-dom: 17.0.11 => 17.0.11 @vitejs/plugin-react: 1.1.4 => 1.1.4 aws-amplify: 4.3.13 => 4.3.13 bootstrap: 5.1.3 => 5.1.3 chance: 1.1.8 => 1.1.8 eslint-config-react-app: 7.0.0 => 7.0.0 eslint-plugin-jsx-a11y: 6.5.1 => 6.5.1 eslint-plugin-no-restricted-imports: 0.0.0 => 0.0.0 feather-icons: 4.28.0 => 4.28.0 handlebars: 4.7.7 => 4.7.7 id128: 1.6.6 => 1.6.6 inter-ui: 3.19.3 => 3.19.3 intro.js: 4.3.0 => 4.3.0 jest: 27.4.7 => 27.4.7 react: 17.0.2 => 17.0.2 react-dom: 17.0.2 => 17.0.2 react-leaflet: 3.2.5 => 3.2.5 react-router-dom: 6.2.1 => 6.2.1 ts-jest: 27.1.3 => 27.1.3 vite: 2.7.13 => 2.7.13 npmGlobalPackages: corepack: 0.10.0 node-gyp: 8.4.1 nopt: 5.0.0 npm-check: 5.9.2 npm: 8.4.0 request: 2.88.2 semver: 7.3.5 yarn: 1.22.17 ```

Describe the bug

Upgrading from @aws-amplify/ui-react 2.2.0 to 2.2.1 breaks UI interaction:

Running it with Amplify.Logger.LOG_LEVEL = 'DEBUG'; shows nothing in the console.

I have an app that has end-to-end tests, which now fail: https://github.com/NordicSemiconductor/asset-tracker-cloud-app-aws-js/pull/9

Expected behavior

Clicking the sign in button should log the user in. Calling signOut() should log the user out.

Reproduction steps

Start the app

git clone https://github.com/NordicSemiconductor/asset-tracker-cloud-app-aws-js.git
cd asset-tracker-cloud-app-aws-js
git checkout -t origin/renovate/aws-amplify-ui-react-2.x
npm ci

# export these environment variables, or your own values (unused values are not needed for the purpose of demonstration, but required by the app)
export PUBLIC_USER_POOL_CLIENT_ID=3s8c3hhgtc6ut8gapd45ljnvgk
export PUBLIC_USER_POOL_ID=eu-west-1_wB5nqBVkh
export PUBLIC_REGION=eu-west-1
export PUBLIC_FOTA_BUCKET_NAME=unused
export PUBLIC_GEOLOCATION_API_URL=unused
export PUBLIC_HISTORICALDATA_TABLE_INFO=unused
export PUBLIC_NCELLMEAS_STORAGE_TABLE_NAME=unused
export PUBLIC_NEIGHBOR_CELL_GEOLOCATION_API_URL=unused
export PUBLIC_USER_IOT_POLICY_ARN=unused
export PUBLIC_WEB_APP_BUCKET_NAME=unused
export PUBLIC_CLOUDFRONT_DISTRIBUTION_ID=unused
export PUBLIC_IDENTITY_POOL_ID=unused
export PUBLIC_WEB_APP_DOMAIN_NAME=unused
export PUBLIC_MQTT_ENDPOINT=unused

npm start

image

Open the browser and the printed URL, select the "Create Account" tab, and fill in some details.

image

Click "Create Account".

Nothing happens.

If you downgrade to @aws-amplify/ui-react@2.2.0 creating an account works.

npm i --save-exact @aws-amplify/ui-react@2.2.0
npm start

Code Snippet

See STR.

Log output

``` // Put your logs below this line [vite] connecting... client.ts:52 [vite] connected. ConsoleLogger.ts:115 [DEBUG] 21:09.577 AuthClass - getting current authenticated user ConsoleLogger.ts:115 [DEBUG] 21:09.654 AuthClass - get current authenticated userpool user ConsoleLogger.ts:115 [DEBUG] 21:09.659 AuthClass - Failed to get user from user pool ConsoleLogger.ts:125 [DEBUG] 21:09.659 AuthClass - The user is not authenticated by the error No current user ```

No log output when I click the "Create Account" button.

aws-exports.js

No response

Manual configuration

No response

Additional configuration

{
    "Auth": {
        "identityPoolId": "xxx",
        "region": "eu-west-1",
        "userPoolId": "eu-west-1_wB5nqBVkh",
        "userPoolWebClientId": "3s8c3hhgtc6ut8gapd45ljnvgk",
        "mandatorySignIn": true
    }
}

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

chrisbonifacio commented 2 years ago

Hi @coderbyheart 👋 thank you for raising this issue. I was able to reproduce the issue with the steps to reproduce. However, this doesn't seem to happen on Next, CRA, and/or webpack apps as I wasn't able to reproduce the behavior on a fresh start using those tools. I'm not too familiar with Vite but maybe that's part of the issue. I'm going to transfer this issue over to the UI repo for better support.

wlee221 commented 2 years ago

Thanks for raising this issue! This is weird because the only two changes between 2.2.0 and 2.2.1 are

I suspect it's the former because the latter doesn't impact auth flows. We will take a look at our earliest capacity. Meanwhile, can you try https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides to force 

{
  "overrides": {
    "xstate": "4.29.0" 
  }
}

and let us know if that resolves it?

coderbyheart commented 2 years ago

Yes, pinning xstate to 4.29.0 fixes the problem.

wlee221 commented 2 years ago

Thank you for verifying, please hold onto that workaround while we come up with a holistic fix for bumping xstate (which we pinned due to TypeScript conflicts). I'll keep you posted.

wlee221 commented 2 years ago

Update: we'll be pinning to 4.28.0 to unblock immediate runtime problems. 4.29.0 has major typescript changes that we'll need more time to adjust to. For now we'll stick with 4.28.0.

This is what you already have on your package-lock.json so this should resolve your application. We'll get a PR up and let you know when it gets released.

wlee221 commented 2 years ago

@coderbyheart Just to be 100% 4.28.0 resolves the bug, can you try the same overrides strategy to check if 4.28.0 works on your same PR?

coderbyheart commented 2 years ago

@wlee221 I've added it to the PR already to verify. End-to-end tests pass now: see https://github.com/NordicSemiconductor/asset-tracker-cloud-app-aws-js/commit/7f6281837a12160965d081846e80774ae348288f

coderbyheart commented 2 years ago

Sorry, I see now that it's 4.28 (twenty eight), I was using 4.29 (twenty nine). Will try.

coderbyheart commented 2 years ago

4.28.0 works as well: https://github.com/NordicSemiconductor/asset-tracker-cloud-app-aws-js/pull/9/commits/808901971971259929a3be8c503ea10b580e3039

wlee221 commented 2 years ago

Much appreciate your fast response. We'll merge #1230 and have it released ETA 02/03.

LeJ84 commented 2 years ago

I have the same trouble in a CRA app when i update in 2.2.1. I tried the overrides workaround, it doesn't for me but i'm not sure that i did it well.

wlee221 commented 2 years ago

@LeJ84, we just released this fix to 2.2.2. Can you try that veresion (make sure your lock file is updated), and let us know if the problem still persists?

LeJ84 commented 2 years ago

Sorry for the time to answer, but i confirm that 2.2.2 fixes that problem ! Good job !

wlee221 commented 2 years ago

Awesome!

juliojimenez commented 2 years ago

I tried the 2.2.1, 2.2.2, and 2.3.0 with and without the xstate override, but unfortunately the buttons were still dead (using withAuthenticator in CRA).

Was able to get back on track with 2.2.0

srianbury commented 2 years ago

I was having this issue as well and wanted to give ya'll one more data point.
(I'm using the default gatsby starter (gatsby: ^4.6.2))

The xstate override solution did not work for me.

{
  "overrides": {
    "xstate": "4.29.0" 
  }
}

Trying 2.2.2 and 2.3.0 did not work either. I was able to get it to work with 2.2.0

wlee221 commented 2 years ago

Weird... As mentioned the only impactful change from 2.2.0 to 2.2.1 was pinning xstate version to 4.26.1 (Release notes here).

@juliojimenez and @srianbury, can you please provide us a repro repo that we can inspect? And just to confirm, you're on NPM 8+ and not on yarn or other package manager, right? overrides is NPM 8+ only.

wlee221 commented 2 years ago

^ edited for typo, overrides is NPM 8+ only.

Also, any lockfile will be helpful! One for 2.2.0 and 2.2.1 so we can inspect the diff.

srianbury commented 2 years ago

@wlee221 Thanks for the info! I did not know that. I am using yarn. It looks like the yarn alternative is resolutions. I'll try it that way and also with npm afterward. Can you clarify which version of xstate I should pin?

wlee221 commented 2 years ago

Thanks for the quick response 🙏 Can you try xstate@4.28.0? This is the version that latest ui-react uses.

srianbury commented 2 years ago

@wlee221 Using 

"resolutions": {
    "xstate": "4.28.0"
},

With yarn fixed the issue in 2.2.1 for me

wlee221 commented 2 years ago

Glad it worked! At the same time I'm very confused because that's exactly what https://github.com/aws-amplify/amplify-ui/pull/1230 in @aws-amplify/ui-react@2.2.2 did 🤔

Can you try nuking your lockfile and reinstall everything with ui-react@2.2.2?

srianbury commented 2 years ago

It might've had something to do with the lock file. When I switched from 2.2.1 to 2.2.2 I removed my node_modules folder but not the lock file. I will remove node_modules, the lockfile, and the xstate pin, set @aws-amplify/ui-react to 2.2.2, and install again and let you know if it works.

srianbury commented 2 years ago

The buttons are not working when I use 2.2.2

Here's the package.json for the 2.2.2 version (this did not work) 2.2.2 package.json Here's the package.json for the 2.2.1 version with xstate pinned to 4.28.0 (this one works) 2.2.1 w/ xstate@4.28.0 And 2.2.0 as is for me as well.

wlee221 commented 2 years ago

Ah I see why... gatsby itself depends on xstate@^4.26.0: lockfile. Because Gatsby and @aws-amplify/ui-react's xstate dependencies versions are incompliant, yarn will create duplicated entries for xstate. Duplicated packages will cause behaviors like these...

For now, please dedupe xstate with resolutions. I'll bring this up to the team and discuss how to handle this.

wlee221 commented 2 years ago

Working on #1346 to declare xstate at ^4.29.0 so npm and yarn can dedupe them easily.

bestickley commented 2 years ago

For what it's worth. I also ran into this issue because I had @aws-amplify/ui-react installed and then I had another library installed via npm link that also depended on @aws-amplify/ui-react. What solved it for me was adding resolve: { dedupe: ["@aws-amplify/ui-react"] } to my vite.config.ts

wlee221 commented 2 years ago

Hi @coderbyheart, sorry it took a while! We just updated our xstate dependency to be more compatible to avoid package duplications.

This will be released next Tuesday, and will let you know once that happens. This should remove the need to use overrides or resolutions.