Amplify-js: AuthState is not exported from @aws-amplify/ui-components

[binarymatt]

Describe the bug
In a typescript based react app, when using the AmplifyAuthenticator, i'd like to change the initalAuthState parameter, described here https://docs.amplify.aws/ui/auth/authenticator?framework=react#prop-initial-auth-state. However, the enum AuthState from ui-components is not exported so typescript fails with an error similar to: node_modules/@aws-amplify/ui-components/dist/types/components"' declares 'AuthState' locally, but it is not exported.

To Reproduce
Steps to reproduce the behavior:

1. Create a CRA app with a typescript template
2. import AmplifyAuthenticator into the App.tsx.
3. add the initalAuthState property to AmplifyAuthenticator like <AmplifyAuthenticator usernameAlias="email" initialAuthState={AuthState.SignUp>
4. See error

Expected behavior
User should be able to import AuthState enum and use it for initalAuthState

[jordanranz]

Hey @binarydud,

You can access this AuthState enum by using:

import { AuthState } from '@aws-amplify/ui-components';

in your App.tsx

It may however be better if we pass this through to @aws-amplify/ui-react so you can do something like:

import { AmplifyAuthenticator, AuthState } from '@aws-amplify/ui-react';

I'll test passing it through and mark this as a feature request

[binarymatt]

@jordanranz what version of ui-components is exporting AuthState, if i add that import statement i get the following error when compiling:

TypeScript error in /Users/matt/src/project/src/App.tsx(28,10):
Module '"../../../../../Users/matt/src/project/node_modules/@aws-amplify/ui-components/dist/types/components"' declares 'AuthState' locally, but it is not exported.  TS2459

i have the following version of ui-components installed: @aws-amplify/[email protected]

[jordanranz]

Did you use:

import { AuthState } from '@aws-amplify/ui-components';

or

import { AuthState } from '@aws-amplify/ui-react';

[binarymatt]

import { AuthState } from '@aws-amplify/ui-components'

[jordanranz]

Ok, got it. I was accidentally testing in a non-Typescript app.

Looking into why AuthState is not being properly exported now.

[jordanranz]

@binarydud the AuthState type is not properly being exported by @aws-amplify/ui-components

Can you try installing @aws-amplify/ui-react@unstable then try:

import { AuthState } from '@aws-amplify/ui-components'

Let us know if that worked for you.

[binarymatt]

Sorry about the delay. The unstable package worked for me, thanks.

[asumaran]

Using @aws-amplify/ui-react@unstable worked for me as well. Thanks

Nope, I got another error now.

./node_modules/@aws-amplify/ui-components/dist/esm-es5/Translations-59947173.js
Attempted import error: 'AuthErrorStrings' is not exported from '@aws-amplify/auth'.

[70nyIT]

Nope, I got another error now.

Same thing happening to me

[healthlake]

any solution yet? I got the same error after installation and using S3 Image Picker

[ng] ERROR in ./node_modules/@aws-amplify/ui-components/dist/esm/Translations-dbe7c89e.js 112:67-83
[ng] "export 'AuthErrorStrings' was not found in '@aws-amplify/auth'

[deepakbrillmark]

I am also getting the same issue

./node_modules/@aws-amplify/ui-react/node_modules/@aws-amplify/ui-components/dist/esm-es5/Translations-dbe7c89e.js
Attempted import error: 'AuthErrorStrings' is not exported from '@aws-amplify/auth'.

[nikevp]

+1 on error after upgrade

[dabit3]

Also getting this error when using version: ^0.2.19 in package.json, installed version 0.2.19

Attempted import error: 'AuthErrorStrings' is not exported from '@aws-amplify/auth'.

Edit / update: This error is from using withAuthenticator from @aws-amplify/auth in a Next.js page. I just tested this in a SPA using Create React App and it works fine.

Edit # 2: After removing my node_modules and re-installing, it also works fine in my Next.js app.

[cbishop-fv]

using CRA w/ Typescript

"@aws-amplify/ui-react": "^0.2.19",
"aws-amplify": "^3.0.13",

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

from example https://docs.amplify.aws/lib/auth/getting-started/q/platform/js#option-1-use-pre-built-ui-components

Failed to compile. ./node_modules/@aws-amplify/ui-components/dist/esm-es5/Translations-392acb9b.js
Attempted import error: 'AuthErrorStrings' is not exported from '@aws-amplify/auth'.

EDIT:
Updating to the following versions has corrected the issue.
"@aws-amplify/ui-react": "^0.2.21",
"aws-amplify": "^3.3.1",