Export 'AmplifySignOut' was not found in '@aws-amplify/ui-react'

Question

I am fresh new to AWS Amplify, so I am following a tutorial on AWS Build a Full-Stack React Application, it's on Virtual Box with the latest Ubuntu image.

During step 3, I got an error when running the app locally

I did some research and tried downgrading the ui-react version from "@aws-amplify/ui-react": "^2.5.0" by installing with sudo npm install aws-amplify @aws-amplify/ui-react@v1, after downgrading it to "@aws-amplify/ui-react": "^1.2.26", it works perfectly when running locally, but when I push it into Git for the automation, the Amplify CI/CD build throws this Error.

So I changed it back to "@aws-amplify/ui-react": "^2.5.0" and push, it still throws the same Error.

2022-02-20T04:20:57.602Z [INFO]: Successfully cleaned up Git credentials
2022-02-20T04:20:57.602Z [INFO]: # Checking for Git submodules at: /codebuild/output/src665494917/src/amplifyapp/.gitmodules
2022-02-20T04:20:57.626Z [INFO]: # Retrieving environment cache...
2022-02-20T04:20:57.683Z [INFO]: # Retrieved environment cache
2022-02-20T04:20:57.683Z [INFO]: ---- Setting Up SSM Secrets ----
2022-02-20T04:20:57.683Z [INFO]: SSM params {"Path":"/amplify/d47wligptyjbe/staging/","WithDecryption":true}
2022-02-20T04:20:57.721Z [WARNING]: !Failed to set up process.env.secrets
2022-02-20T04:20:57.721Z [INFO]: No live updates for this build run
2022-02-20T04:20:57.730Z [INFO]: # Retrieving cache...
2022-02-20T04:20:59.472Z [INFO]: # Extracting cache...
2022-02-20T04:21:02.981Z [INFO]: # Extraction completed
2022-02-20T04:21:25.314Z [INFO]: ## Starting Backend Build
                                 # Starting phase: build
2022-02-20T04:21:28.545Z [INFO]: [31mInvalid feature flag configuration[39m
2022-02-20T04:21:28.548Z [INFO]: [31mThese feature flags are defined in the "amplify/cli.json" configuration file and are unknown to the currently running Amplify CLI:[39m
                                 [31m  - project[39m
                                 [31m  - graphqltransformer.transformerversion[39m
                                 [31m  - graphqltransformer.suppressschemamigrationprompt[39m
                                 [31m  - graphqltransformer.securityenhancementnotification[39m
                                 [31m  - graphqltransformer.showfieldauthnotification[39m
                                 [31m  - auth.useenabledmfas[39m
                                 [31mThis issue likely happens when the project has been pushed with a newer version of Amplify CLI, try updating to a newer version.[39m
                                 [31mEnsure that the CI/CD pipeline is not using an older or pinned down version of Amplify CLI.[39m
                                 [31mLearn more about feature flags: https://docs.amplify.aws/cli/reference/feature-flags[39m
2022-02-20T04:21:28.555Z [ERROR]: !!! Build failed
2022-02-20T04:21:28.556Z [ERROR]: !!! Non-Zero Exit Code detected

Can anyone give me some advice on how to fix it? I don't know why the official AWS Amplify tutorial would go like this, I have no idea about React and Amplify so I am very strugling.

Answer 1

I was getting this exact same issue. Also this was related to the styling not populating like in this other question as well here, Amplify UI is not working proper in React js .

I went through the @aws-amplify files and it turns out that ui-react-v1 needed to be imported instead of the ui-react. Try importing the following line to get your styling to show correctly like the module example.

import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react-v1';

I hope this helps you out and anyone else getting this issue!

Answer 2

I had exactly the same issue whilst following the AWS Full Stack Tutorial, not building locally or when pushed to AWS via Amplify.

Changing the version of ui-react in the dependencies block of package.json does not solve this problem for me.

As per the Amplify docs, you need to add "-v1" after the framework name on the import line as per Ian's comment (https://stackoverflow.com/users/6632263/ian-brown) to get a successful build.

import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react-v1';

My upstream build worked as well.