Amplify-js: Error when migrating from aws-amplify-react to @aws-amplify/ui-react

[Nutriadmin]

Describe the bug
I followed the steps at the docs to migrate from aws-amplify-react to the newer ui library: @aws-amplify/ui-react. But I get the following error when running the app:

Failed to compile.

./node_modules/@aws-amplify/ui-components/dist/esm-es5/amplify-confirm-sign-in_8.entry.js
Attempted import error: 'Auth' is not exported from '@aws-amplify/auth'.

 ```

**To Reproduce**
Here is how I handled authentication with `aws-amplify-react`:

import React from 'react';
import {
AmplifyTheme,
Authenticator,
ConfirmSignIn,
ConfirmSignUp,
ForgotPassword,
Loading,
RequireNewPassword,
SignIn,
SignUp,
TOTPSetup,
VerifyContact
} from 'aws-amplify-react';

type Props = {
onAuthStateChange: () => void;
};

export const AppAuthenticator: React.FC = ({ onAuthStateChange }) => {
const theme = {
...AmplifyTheme,
navBar: {
...AmplifyTheme.navBar,
background: '#ffc0cb'
},
button: {
...AmplifyTheme.button,
background: 'var(--amazonOrange)'
},
sectionBody: {
...AmplifyTheme.sectionBody,
padding: '5px'
},
sectionHeader: {
...AmplifyTheme.sectionHeader,
background: 'var(--squidInk)'
}
};

return (
theme={theme}
hideDefault={true}
onStateChange={onAuthStateChange}
>



signUpConfig={{
hideAllDefaults: true,
signUpFields: [
{
label: 'Email',
key: 'username',
required: true,
placeholder: 'Email for your new account',
type: 'email',
displayOrder: 1
},
{
label: 'Password',
key: 'password',
required: true,
placeholder: 'Create a password',
type: 'password',
displayOrder: 2
}
]
}}
/>






);
};

This worked as expected. Here is how I have tried the new components:

import React from 'react';
import {
// AmplifyTheme,
AmplifyAuthenticator,
AmplifyConfirmSignIn,
AmplifyConfirmSignUp,
AmplifyForgotPassword,
// AmplifyLoading,
AmplifyRequireNewPassword,
AmplifySignIn,
AmplifySignUp,
// AmplifyTOTPSetup,
AmplifyVerifyContact
} from '@aws-amplify/ui-react';

type Props = {};

export const AppAuthenticator: React.FC = ({ children }) => {

return (
usernameAlias="email"
>



slot="sign-up"
formFields={[
{
label: 'Email',
required: true,
placeholder: 'Email for your new account',
type: 'email'
},
{
label: 'Password',
required: true,
placeholder: 'Create a password',
type: 'password'
}
]}
/>



{//}
{//}

{children}

);
};

{children} is where I render my app once the user is authenticated.

**Expected behavior**
I would expect the authentication components to work as before after following the steps in the migration guide. Not sure if I have done something wrong whilst migrating, or if some step is missing in the migration guide in the AWS Amplify docs.

**Additional context**
I removed `[email protected]` and replaced it with `@aws-amplify/[email protected]`. Here are all my dependencies in package.json:

"dependencies": {
"@apollo/react-hooks": "^3.1.3",
"@aws-amplify/core": "^2.2.4",
"@aws-amplify/datastore": "^1.0.4",
"@aws-amplify/ui-react": "^0.2.3",
"@stripe/react-stripe-js": "^1.0.3",
"@stripe/stripe-js": "^1.1.0",
"apollo-cache-inmemory": "^1.6.5",
"apollo-client": "^2.6.8",
"apollo-link": "^1.2.13",
"apollo-link-ws": "^1.0.19",
"aws-amplify": "2.2.2",
"aws-appsync-auth-link": "^2.0.1",
"aws-appsync-subscription-link": "^2.0.1",
"bootstrap": "^4.4.1",
"font-awesome": "^4.7.0",
"formik": "^2.1.4",
"graphql-tag": "^2.10.3",
"line-awesome": "^1.0.2",
"moment": "^2.24.0",
"ramda": "^0.27.0",
"react": "^16.13.0",
"react-apollo": "^3.1.3",
"react-bootstrap": "^1.0.0-beta.17",
"react-dom": "^16.13.0",
"react-router-bootstrap": "^0.25.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0",
"react-table": "^7.0.0",
"react-toastify": "^5.1.1",
"yup": "^0.28.3"
},
"devDependencies": {
"@testing-library/jest-dom": "^5.4.0",
"@testing-library/react": "^10.0.2",
"@testing-library/user-event": "^10.0.1",
"@types/jest": "^24.9.1",
"@types/node": "^12.0.0",
"@types/ramda": "^0.26.43",
"@types/react": "^16.9.33",
"@types/react-dom": "^16.9.0",
"@types/react-router-bootstrap": "^0.24.5",
"@types/react-router-dom": "^5.1.3",
"@types/react-table": "^7.0.12",
"@types/yup": "^0.26.32",
"cypress": "^4.4.0",
"eslint-plugin-react-hooks": "^3.0.0",
"husky": "4.2.3",
"jest-environment-jsdom-sixteen": "^1.0.3",
"lint-staged": "10.0.8",
"node-sass": "^4.13.1",
"prettier": "1.19.1",
"snapshot-diff": "^0.7.0",
"ts-jest": "^25.3.1",
"typescript": "~3.7.2"
}
```

Am I doing something wrong, do I need to upgrade other packages in @aws-amplify, or is there a bug/something missing from the docs? Any help would be appreciated.

[russelldias98]

Facing a similar issue!

When I use @aws-amplify/ui-react

./node_modules/@aws-amplify/ui-components/dist/esm-es5/amplify-amazon-button_5.entry.js Attempted import error: 'Auth' is not exported from '@aws-amplify/auth'.

[russelldias98]

Assuming it needed @aws-amplify/auth and I install it.
This is the new error that comes up.

./node_modules/@aws-amplify/ui-components/dist/esm-es5/app-globals-93ab0f5a.js Attempted import error: 'browserOrNode' is not exported from '@aws-amplify/core'.

Assuming it needed @aws-amplify/core and I install it.
This is the new error that comes up.

AuthError - Error: Amplify has not been configured correctly. This error is typically caused by one of the following scenarios:
1. Make sure you're passing the awsconfig object to Amplify.configure() in your app's entry point
2. There might be multiple conflicting versions of aws-amplify or amplify packages in your node_modules.

[ashika01]

@russelldias98 : Did you try cleaning the node_modules and re-installing for this https://github.com/aws-amplify/amplify-js/issues/5464#issuecomment-616642005?

[russelldias98]

Yes! No luck

[ashika01]

@russelldias98 what version are u using? I had this issue too, but cleaning up node_modules solved it for me.

[russelldias98]

@ashika01 here!

"dependencies": { "aws-amplify": "^2.2.0", "aws-amplify-react": "^3.1.9", }

[ashika01]

@russelldias98 : This probably might be why - aws-amplify-react newer version needs aws-amplify new version. Could you update aws-amplify to latest and cleanup node_modules and try it again.? If it is a gap in the document I can update it.

try
"dependencies": { "aws-amplify": "latest", "aws-amplify-react": "latest" }

[ashika01]

@Nutriadmin : Looking at this, could you paste your code where you do Amplify.configure? Looking at your config, looks like you are on old version of aws-amplify too ("aws-amplify": "2.2.2"). Could you update it to latest?

yarn add aws-amplify@latest

let me know how it goes.

[russelldias98]

This seems to have fixed it! Updated the packages to latest!

[ashika01]

@Nutriadmin The same should probably fix your issues too. Closing this issue. If you still face some issues, just ping me on this one and I will reopen the issue need be

[Nutriadmin]

Thanks for the quick responses. I finally managed to get it to work. I had to change several packages though:

• upgraded @aws-amplify/core from v2.2.2 to v3.2.4
• installed @aws-amplify/auth v3.2.4, as it was not required previously (thanks @russelldias98 )
• upgraded aws-amplify from v2.2.2 to v3.0.8
• removed aws-amplify-react (this is replaced b @aws-amplify/ui-react as far as I understand).

@ashika01 you mentioned you could update the docs. I would suggest you add a line at the migration section of the docs if appropriate mentioning these other dependencies in case someone has the same issue.

We set up the authenticator just about 2 months ago with the older versions of the software following the docs at that time, so it's quite likely that other users that started around that time would have the same issue.

Also I noticed, these are the dependencies of @aws-amplify/ui-react:

"dependencies": {
    "@aws-amplify/ui-components": "^0.3.2"
  }

Then, when checking @aws-amplify/ui-components, the peer dependencies are:

  "peerDependencies": {
    "@aws-amplify/auth": "^2.1.5",
    "@aws-amplify/core": "^2.2.4",
    "@aws-amplify/xr": "^1.1.5"
  },

Shouldn't @aws-amplify/auth and @aws-amplify/core be version 3 at least? Or maybe I'm missing something. We had version 2.2.2 for @aws-amplify/core and that one didn't work.

[ivenxu]

It's poorly documented. In the official doc, it says only needs

npm install aws-amplify @aws-amplify/ui-react

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

But the forks here pointed out there're more dependencies are needed.