amplify-js: AuthError - Error: Amplify has not been configured correctly. (aws-amplify 3.4.0, auth 3.4.31, ui-react 1.1.0)

Before opening, please confirm:

• I have checked to see if my question is addressed in the FAQ.
• I have searched for duplicate or closed issues.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

App Id

dj8d92h79lafk

Region

us-west-2

Amplify Console feature

Not applicable

Describe the bug

I’m seeing this AuthError error which has been reported several times before but none of the recommended solutions in those tickets have worked for me yet. I’m under the impression that some of the dependencies specified in my package.json file are incompatible with each other but I haven’t been able to get it sorted.

Here’s the console error:

AuthError - 
            Error: Amplify has not been configured correctly. 
            The configuration object is missing required auth properties.
            This error is typically caused by one of the following scenarios:

            1. Did you run `amplify push` after adding auth via `amplify add auth`?
                See https://aws-amplify.github.io/docs/js/authentication#amplify-project-setup for more information

            2. This could also be caused by multiple conflicting versions of amplify packages, see (https://docs.amplify.aws/lib/troubleshooting/upgrading/q/platform/js) for help upgrading Amplify packages.

Here’s my package.json file:

{
  "name": "dummyappname",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@aws-amplify/auth": "^3.4.31",
    "@aws-amplify/ui-react": "^1.1.0",
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "aws-amplify": "^3.4.0",
    "aws-sdk": "^2.903.0",
    "bootstrap": "^3.4.1",
    "node-sass": "^5.0.0",
    "react": "^17.0.2",
    "react-bootstrap": "^1.5.2",
    "react-bootstrap-validation": "^0.1.11",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-vis": "^1.11.7",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

And here’s the app entry point code:

import Amplify, { Auth } from 'aws-amplify';
import awsmobile from './aws-exports';
import './App.css';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import React from "react";
import { withAuthenticator } from '@aws-amplify/ui-react';

function App() {

    Amplify.configure(awsmobile);
    Auth.configure(awsmobile);

    return (
        <Router>
            <Switch>
                <div className="app">

                    <Route exact path={["/", "/home"]}>
                        <div>Hello, World</div>
                    </Route>

                </div>
            </Switch>
        </Router>
    )
}

export default withAuthenticator(App);

Expected behavior

The basic authentication functionality as described in this tutorial: https://docs.amplify.aws/lib/auth/getting-started/q/platform/js#enable-sign-up-sign-in-and-sign-out

Reproduction steps

1. Use the package.json
2. Run the app entry code

Build Settings

No response

Additional information

No response