9

I am trying to add Login functionality to a React app I'm building using Amplify and AWS Cognito, but when I add the following line in my Login.js file:

Import {Auth} from "aws-amplify-react";

and try to compile, I get the following error:

Failed to compile.

./node_modules/aws-amplify-react/lib-esm/Analytics/trackLifecycle.js
Module not found: Can't resolve '@aws-amplify/analytics' in 'my_react_path/node_modules/aws-amplify-react/lib-esm/Analytics'

I tried installing Amplify with homebrew and npm, but I can't get around this, any tips?

EDIT:

Initially I had:

Import {Auth} from "aws-amplify";

But The compiler couldn't resolve aws-amplify, and I could only find aws-amplify-react in the node_modules folder so I changed it.

However, in "node_modules/aws-amplify-react/lib-esm/Analytics/trackLifecycle.js" in line 39:

import Analytics from '@aws-amplify/analytics';

The problem is that it can't find aws-amplify... Did I make a mess while installing maybe?

Danf
  • 1,409
  • 2
  • 21
  • 39

3 Answers3

4

I get a similar error

Failed to compile.

./node_modules/aws-amplify-react/lib-esm/Analytics/trackLifecycle.js Module not found: Can't resolve '@aws-amplify/analytics' in '/Users/myuser/myproject/node_modules/aws-amplify-react/lib-esm/Analytics'

when following the Amplify tutorial.

The workaround I found is to execute:

npm i -S @aws-amplify/analytics @aws-amplify/interactions @aws-amplify/storage @aws-amplify/ui @aws-amplify/xr aws-amplify

Obviously, I would love to know how to avoid all these extra libraries.

Community
  • 1
  • 1
cyrf
  • 5,127
  • 6
  • 25
  • 42
  • 1
    For those wondering about why there are multiple `@aws-amplify/*` packages, Amplify is moving to a more modularized structure. See their wiki article on it here: https://github.com/aws-amplify/amplify-js/wiki/Amplify-modularization. AWS isn't alone, as there is a trend toward modularization, and others such as [Expo](https://blog.expo.io/expo-sdk-34-is-now-available-4f7825239319) are moving to modular imports as well. – bogan27 Feb 27 '20 at 18:56
3

Assuming that you are not worried about bundle size at this stage, probably your easiest course of action is to remove your node_modules entirely, then:

  1. npm i aws-amplify
  2. import like this:
import Amplify, { Auth } from 'aws-amplify'

You only need to install/import aws-amplify-react if you plan on using the OOTB UI components. If you are making your own UI components for login you don't need that package at this stage.

dustinnoyes
  • 199
  • 1
  • 7
0

I would revert to your previous version before attempting to add amplify (old package.json & node_modules)

Follow this walkthrough: https://docs.amplify.aws/start/getting-started/installation/q/integration/react-native

When you get to the "Add Authentication" step, skip it and go straight to "Next Steps" -> "Authentication" and follow until you get to:

import Amplify, {Auth} from 'aws-amplify';
import config from './aws-exports';
Amplify.configure(config);
Yoda
  • 79
  • 6