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

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<Props> = ({ 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 (
    <Authenticator
      theme={theme}
      hideDefault={true}
      onStateChange={onAuthStateChange}
    >
      <SignIn />
      <ConfirmSignIn />
      <RequireNewPassword />
      <SignUp
        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
            }
          ]
        }}
      />
      <ConfirmSignUp />
      <VerifyContact />
      <ForgotPassword />
      <TOTPSetup />
      <Loading />
    </Authenticator>
  );
};

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<Props> = ({ children }) => {


  return (
    <AmplifyAuthenticator
      usernameAlias="email"
    >
      <AmplifySignIn slot="sign-in" />
      <AmplifyConfirmSignIn />
      <AmplifyRequireNewPassword />
      <AmplifySignUp
        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'
          }
        ]}
      />
      <AmplifyConfirmSignUp />
      <AmplifyVerifyContact />
      <AmplifyForgotPassword />
      {/*<AmplifyTOTPSetup />*/}
      {/*<AmplifyLoading />*/}
      <div>{children}</div>
    </AmplifyAuthenticator>
  );
};

{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 aws-amplify-react@3.1.3 and replaced it with @aws-amplify/ui-react@0.2.3. 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.

[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.

[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.