Auth Error: Amplify has not been configured correctly after upgrading to auth 3.4.17/ui-react 0.2.34

[24601]

Describe the bug
Using the React UI components to provide login/reset/signup (no real customization, pretty much out of the box), after upgrade to "@aws-amplify/auth": "^3.4.17","@aws-amplify/ui-react": "^0.2.34", the following error is observed in the javascript console of the client and no authentication/login occurs:

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
                See https://aws-amplify.github.io/docs/js/authentication#configure-your-app for more information
            
            2. There might be multiple conflicting versions of aws-amplify or amplify packages in your node_modules.
                Try deleting your node_modules folder and reinstalling the dependencies with `yarn install`

This appears to be a regression of #4315 but am opening as separate, new issue pursuant to direction from @sammartinez
(thank you!).
To Reproduce
Steps to reproduce the behavior:

Upgrade working project to "@aws-amplify/auth": "^3.4.17","@aws-amplify/ui-react": "^0.2.34",
Known good at

"@aws-amplify/auth": "^3.4.7",
    "@aws-amplify/ui-react": "^0.2.24",

There were NO other changes in ANYTHING, literally not a single line of code or config change in our project. We can swap libraries, redeploy, and break and fix simply with rev changes as mentioned above.

Expected behavior
A clear and concise description of what you expected to happen.

Nothing. We expect absolutely nothing to change. No breaking changes were noted in the library releases and this is a 0.0.XXXX release and this library claims semver compliance.

Code Snippet
Please provide a code snippet or a link to sample code of the issue you are experiencing to help us reproduce the issue. (Be sure to remove any sensitive data)

No code necessary. Just bump vers.

Screenshots
If applicable, add screenshots to help explain your problem.

What is Configured?
If applicable, please provide what is configured for Amplify CLI:

• Which steps did you follow via Amplify CLI when configuring your resources.
• Which resources do you have configured?
  • If applicable, please provide your aws-exports file:

  /* eslint-disable */
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "us-east-2",
    "aws_cognito_identity_pool_id": "us-east-2:a759ee51-7ebf-48f6-81e2-596503bb2dcb",
    "aws_cognito_region": "us-east-2",
    "aws_user_pools_id": "us-east-2_1dyBfAsK2",
    "aws_user_pools_web_client_id": "67e6btuhnihue59lnm4md59hos",
    "oauth": {},
    "federationTarget": "COGNITO_IDENTITY_POOLS",
    "aws_appsync_graphqlEndpoint": "https://kobpvplyl5bgjh5qvecrkr42g4.appsync-api.us-east-2.amazonaws.com/graphql",
    "aws_appsync_region": "us-east-2",
    "aws_appsync_authenticationType": "AMAZON_COGNITO_USER_POOLS",
    "aws_appsync_apiKey": "da2-igqlqsay4jgo3lyvs5xma52fza",
    "aws_cloud_logic_custom": [
        {
            "name": "AdminQueries",
            "endpoint": "https://y70roi06ag.execute-api.us-east-2.amazonaws.com/platform",
            "region": "us-east-2"
        }
    ],
    "aws_user_files_s3_bucket": "user-files224859-platform",
    "aws_user_files_s3_bucket_region": "us-east-2"
};


export default awsmobile;

For any further code/config disclosure, please contact us directly via AWS Support Case 7895928411 that is open for this issue in our account.

[elorzafe]

@24601

Did you try cleaning your node_modules and then do a fresh install?. Sometimes I have seen that error message when a package has a duplicate version installed, that could happen after upgrading.

How are you importing and configuring Amplify, I tried this on a react app and it work, but I also want to try how your doing this.

App.js

import React from "react";
import Auth from "@aws-amplify/auth";
import { AmplifyAuthenticator, AmplifySignOut } from "@aws-amplify/ui-react";
import awsconfig from "./aws-exports";

Auth.configure(awsconfig);

const App = () => (
  <AmplifyAuthenticator>
    <div>
      My App
      <AmplifySignOut />
    </div>
  </AmplifyAuthenticator>
);

export default App;

package.json

{
  "name": "auth-issue-7604",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@aws-amplify/auth": "^3.4.17",
    "@aws-amplify/ui-react": "^0.2.34",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "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"
    ]
  }
}

[24601]

We did an rm -fr node_modules ; rm package-lock.json and npm i in between each switch and not removing package-lock.json (but still removing node_modules) and using previous known good versions of package-lock.json and only bumping these libs and letting npm tooling make whatever changes it elected, pretty much every combination of these we could imagine, so I am not so sure that it's duped versions or something that like that.

I am working on having our devs build up some sort of shareable replication of the issue (although this is precisely the "Amplify costs us way more than it saves us" frustrations I have with the product, I know bugs will happen, but the amount of times we've dedicated days of our development resources to fixing AWS's regressions, problems, or working around them....). It will likely be a fork/branch of a dev project where this is also showing itself so we can avoid production code disclosures but I would still want to do this less-than-publicly if possible (are you perhaps part of this nebulous "service team" our AWS Support ticket mentions? I am fine sharing it through/under the protections of our AWS Support agreement, nothing horribly confidential that needs more than that, but not quite a public repo thing).

Thanks for your help, I appreciate and know you, personally, are trying to solve our problem with helpfulness and dedication to our issue, and my frustrations with the broader machinery that is AWS that should do (way) better is not your fault (which is why I am trying to get management attention to these quality issues because any one of these is not a "screw it, we are out" level issue, but the hit parade of issues that never ends absolutely is a business-case-breaker, and I will vocally and endlessly dissuade anyone who will listen, small and large from ever choosing Amplify for anything, our experience has been that abysmal, but that's a separate item).

Here's our current index.tsx on that project:

import awsAmplify from "aws-amplify";
import * as LogRocket from "logrocket";
import "bootstrap/dist/css/bootstrap.min.css";
import dmConfig from "diagramMaker/dmConfig";
import App from "./App";
import "./App.css";
import { graph } from "./data";
import { addDevTools } from "./utils";
import ActivityMonitor from "diagramMaker/service/ActivityMonitor";
const activityMonitor = new ActivityMonitor();
import { Auth } from "@aws-amplify/auth";

LogRocket.init("wovmbb/px");

// amplify configuration
import awsconfig from "./aws-exports";

// spread operator added in attempt to workaround/troubleshoot to ensure a config object wasn't being messed with
// causing the config to be "lost" for some reason, we also tried deepClone....
awsAmplify.configure({ ...awsconfig });
/*
This was added as a workaround attempt from the discussion in #4315, it "works" in that it gets us past auth, but we have to do it for every service we use then, but even then, we get a little further, but not much, because then #7555 comes and rears its ugly head, the platform is definitely in some kind of a borked state even though this workaround gets us "further". 

It is as if suddenly ```awsAmplify.configure(awsconfig)``` is not enough suddenly, this stuff works just fine with all previous revs, but suddenly this call is not sufficient? Again, from my discussion in #7555, is there a breaking change in that API call that massively violates the contract provided by that method that is both undocumented and a massive breaking change in a 0.0.XXX release in a library that claims semver compliance? Which is why I am reticent to accept the "you are doing it wrong" conclusion when this exact code without these hacks and repeated config stanzas that violate DRY are somehow a fix

Auth.configure(awsconfig);
import { API } from "aws-amplify";

API.configure(awsconfig);
*/
const domElement = document.getElementById("root")!;
// authorize()
//
new App(domElement, dmConfig, {
  initialData: graph,
  consumerEnhancer: addDevTools(),
});

@24601

Did you try cleaning your node_modules and then do a fresh install?. Sometimes I have seen that error message when a package has a duplicate version installed, that could happen after upgrading.

How are you importing and configuring Amplify, I tried this on a react app and it work, but I also want to try how your doing this.

App.js

import React from "react";
import Auth from "@aws-amplify/auth";
import { AmplifyAuthenticator, AmplifySignOut } from "@aws-amplify/ui-react";
import awsconfig from "./aws-exports";

Auth.configure(awsconfig);

const App = () => (
  <AmplifyAuthenticator>
    <div>
      My App
      <AmplifySignOut />
    </div>
  </AmplifyAuthenticator>
);

export default App;

package.json

{
  "name": "auth-issue-7604",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@aws-amplify/auth": "^3.4.17",
    "@aws-amplify/ui-react": "^0.2.34",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "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"
    ]
  }
}

[elorzafe]

@24601

Is possible that you have on your package.json

...
"@aws-amplify/auth": "^3.4.7",
...
"aws-amplify": "^3.3.3",
...

Having on your package.json file modularized packages like @aws-amplify/auth and aws-amplify (the whole library) can also have this duplicated package behavior.

If you installed aws-amplify you don't need modularized packages. The library is now tree shaking compatible so you will have similar bundle size if installing modularized packages or the whole library.

Please let me know if that helps

[24601]

@24601

Is possible that you have on your package.json

...
"@aws-amplify/auth": "^3.4.7",
...
"aws-amplify": "^3.3.3",
...

Having on your package.json file modularized packages like @aws-amplify/auth and aws-amplify (the whole library) can also have this duplicated package behavior.

If you installed aws-amplify you don't need modularized packages. The library is now tree shaking compatible so you will have similar bundle size if installing modularized packages or the whole library.

Please let me know if that helps

Thank you very much, this has eluded us and all levels of AWS support. This project started before the modularization was the default and looks like suddenly something changed in the modularized libs that hit on this duplication.

Thank you for catching this, it seems to address the issue we have here, in #4315, and in #7555.

We are using aws-amplify 3.3.14 and importing the @aws-amplify/ui-react 3.4.17 and things are working, thank you very much again. Perhaps a note in the modularized libs that projects migrating/coming from the non-modularized library (or a post-install hook that looks for it in package.json even and puts out an NPM warn?) could help avoid a lot of heartache for you guys, support, and customers, because while this sure seems like a "DUH" issue, when projects that started before the modularized libs were standard have new devs come on board that now look at new documentation that points them to modularized libs, these kinds of issues do occur.

Again, thank you for your help, dedicated, smart, and helpful guys like you are what is keeping us here and keeping us in production and developing.

[elorzafe]

@24601

I am glad that your problem is now fixed!, I am happy to help and we appreciate all your feedback.

I created this issue to avoid this problem in the future.

[nasseralmohr3600]

@24601

I am glad that your problem is now fixed!, I am happy to help and we appreciate all your feedback.

I created this issue to avoid this problem in the future.

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.