Please pre-compile aws-amplify-react/dist/API/GraphQL/Connect.js

[dolezel]

When building app with this dependency with create-react-app it throws error:

Creating an optimized production build...
Failed to compile.

Failed to minify the code from this file: 

 	./node_modules/aws-amplify-react/dist/API/GraphQL/Connect.js:65 

Read more here: http://bit.ly/2tRViJ9

Please pre-compile aws-amplify-react/dist/API/GraphQL/Connect.js

see http://bit.ly/2tRViJ9

[jackwellsxyz]

Hello! Thanks for plugging the issue - I was using withAuthenticator() on a Gatsby starter site and was getting that error. Now I'm getting a "No userPool" error when I try to log in. I've associated my Gatsby project with a new AWS Mobile Hub backend, but still getting the same error when I try to sign up. It is most definitely associated with a Cognito user pool. Thoughts?

[elorzafe]

Hi aws-amplify-react@0.1.41 fixed that problem.

The issue you mention with No userPool it happen to me.
Please check if exists node_modules/aws-amplify-react/node_modules/aws-amplify

If that happen I fixed by installing aws-amplify with the same version that is required for aws-amplify-react. And then install aws-amplify-react that should remove the folder I mentioned before.

[jackwellsxyz]

Hi @elorzafe, thanks for the tip! I tried upgrading to the latest aws-amplify (0.3.0) and aws-amplify-react (0.1.41) based on your instructions above, but to no avail. Maybe I'm doing something wrong?

To recreate this:

> gatsby new test
> cd test
[Create new Mobile Hub project, note the id number, and add a Cognito user pool]
> awsmobile init <id>
> npm i --save aws-amplify-react

Edit the src/pages/page-2.js to add:
import {withAuthenticator} from 'aws-amplify-react';
Change last line to be:
export default withAuthenticator(SecondPage);

> gatsby develop

Then navigate to the second page in the web browser, try to create a new user. I get a "No userPool" error. I can confirm withAuthenticator is working perfectly with a CRA app.

Thoughts?
Thank you!

[elorzafe]

Where did you initialize this?

import Amplify from 'aws-amplify';
import awsmobile from './aws-exports';
Amplify.configure(awsmobile);

I usually do this in the entry point of my app

[jackwellsxyz]

Ah. That would do it. I've added it into my Gatsby gatsby-browser.js and it works like a charm. Here's the snippet:

 import Amplify from 'aws-amplify';
 import awsmobile from './src/aws-exports'; 

 exports.onClientEntry = () => {
    Amplify.configure(awsmobile);
 }

Thanks!

[elorzafe]

:-)

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