AWS Amplify & React - Module not found: Can't resolve '@aws-amplify/analytics'

Question

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?

Solution 1

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.

Solution 2

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.