Amplify-js: Getting "no userpool" error without any explanation on pressing Sign in on React HOC

[harshayburadkar]

Do you want to request a feature or report a bug?
_Bug_

What is the current behavior?
_Getting "no userpool" error on Sign in page of React HOC.
All I did was take a fresh app created by Create React App and perform the setup for Auth as per the documentation._

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than AWS Amplify.

_minimal git repo with issue:
https://github.com/harshayburadkar/SampleAmplifyRepo_

What is the expected behavior?
_it should sign in successfully_

Which versions of Amplify, and which browser / OS are affected by this issue? Did this work in previous versions?
_Amplify: 1.0.4
Chrome: 67.0.3396.99 (Official Build) (64-bit)
OS: Mac OS: 10.12.6 (16G1510)_

You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = 'DEBUG'; in your app.

[michaelduminy]

I had this same issue. I solved it by replacing all the destructured imports with specific imports. I also removed the aws-amplify on which aws-amplify-react depends.

Before:

import { Authenticator, Greetings, AmplifyTheme } from 'aws-amplify-react';

After:

import Authenticator from 'aws-amplify-react/dist/Auth/Authenticator';
import Greetings from 'aws-amplify-react/dist/Auth/Greetings';
import AmplifyTheme from 'aws-amplify-react/dist/AmplifyTheme';

Hope this helps.

[manueliglesias]

Hi @harshayburadkar

Yeah, @michaelduminy solution works. For a little bit of background, the issue might be that you end up having two copies of aws-amplify in your node_modules. You can play with your package.json to use the same version that aws-amplify-react depends on.

[harshayburadkar]

I find the suggested solutions not really solutions at all. They are hacks. I am surprised these are suggested as solutions.
Your Getting Started flow itself is broken that I think is a very high priority issue. What first impression am I supposed to have about Amplify? I am reconsidering to use it for a serious project. Otherwise please make it clear that some features are in Beta or something. I wouldn't have wasted time in considering those for serious projects. Paying AWS customers really deserve better than this.

Coming back to the original thread:
I wasn't satisfied by posted solution. And luckily I was able to fix the issue by using Authenticator instead of withAuthenticator.

I just wrapped my App component with Authenticator component as follows:

import {Authenticator} from 'aws-amplify-react'

<Authenticator> 
  <App/> 
</Authenticator>

[jordanranz]

Hi @harshayburadkar, I was able to reproduce your issue.

When you declare Amplify.configure(aws_exports) inside of your App component's constructor, Amplify configuration does not get picked up by the withAuthenticator HOC because it wraps the App component and App's constructor will execute after the withAuthenticator's configuration is set.

If you move Amplify.configure(aws_exports) to the top of the file after you declare aws_exports, it should work. See this documentation for placement:
https://aws-amplify.github.io/amplify-js/media/quick_start#connect-to-your-backend

I will add a task to clarify this in the documentation. Maybe we can also throw some kind of warning to the developer.

Let me know if moving the Amplify.configure(aws_exports) worked.

[harshayburadkar]

Great, that very much makes sense.

It indeed can be mentioned in the document to avoid some bad first-use experiences for users trying the library out. Users won't always proactively think about(and shouldn't have to) when withAuthenticator might be using the config i.e. at initialization or at runtime while rendering the wrapped component.

I moved the Amplify.configure to index.js which is the 'main' file above App.js, and it works.
Thanks!

[bod3code]

I blew away my node_modules as per this thread and after a fresh yarn it all came back to life