amplify-js: Unable to resolve "aws-amplify" from "App.js"

Today I initialized a new react native project with Amplify.

In my app.js I want to do:

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

But it says: Unable to resolve "aws-amplify" from "App.js" On my phone it says:

The development server returned response error code: 500

URL: http://192.168.1.15:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false

Body:
{"originModulePath":"/Users/Dion/www/movieproject-app/App.js","targetModuleName":"aws-amplify","message":"Unable to resolve module `aws-amplify` from `/Users/Dion/www/movieproject-app/App.js`: Module `aws-amplify` does not exist in the Haste module map or in these directories:\n  /Users/Dion/www/movieproject-app/node_modules\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n  1. Clear watchman watches: `watchman watch-del-all`.\n  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.\n  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.","errors":[{"description":"Unable to resolve module `aws-amplify` from `/Users/Dion/www/movieproject-app/App.js`: Module `aws-amplify` does not exist in the Haste module map or in these directories:\n  /Users/Dion/www/movieproject-app/node_modules\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n  1. Clear watchman watches: `watchman watch-del-all`.\n  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.\n  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`."}],"name":"Error","stack":"Error: Unable to resolve module `aws-amplify` from `/Users/Dion/www/movieproject-app/App.js`: Module `aws-amplify` does not exist in the Haste module map or in these directories:\n  /Users/Dion/www/movieproject-app/node_modules\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n  1. Clear watchman watches: `watchman watch-del-all`.\n  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.\n  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.\n    at ModuleResolver.resolveDependency (/Users/Dion/www/movieproject-app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:183:15)\n    at ResolutionRequest.resolveDependency (/Users/Dion/www/movieproject-app/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)\n    at DependencyGraph.resolveDependency (/Users/Dion/www/movieproject-app/node_modules/metro/src/node-haste/DependencyGraph.js:283:16)\n    at Object.resolve (/Users/Dion/www/movieproject-app/node_modules/metro/src/lib/transformHelpers.js:261:42)\n    at dependencies.map.result (/Users/Dion/www/movieproject-app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:399:31)\n    at Array.map (<anonymous>)\n    at resolveDependencies (/Users/Dion/www/movieproject-app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:18)\n    at /Users/Dion/www/movieproject-app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:269:33\n    at Generator.next (<anonymous>)\n    at asyncGeneratorStep (/Users/Dion/www/movieproject-app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)"}
processBundleResult
    BundleDownloader.java:300
access$200
    BundleDownloader.java:37
onChunkComplete
    BundleDownloader.java:224
emitChunk
    MultipartStreamReader.java:76
readAllParts
    MultipartStreamReader.java:154
processMultipartResponse
    BundleDownloader.java:208
access$100
    BundleDownloader.java:37
onResponse
    BundleDownloader.java:169
execute
    RealCall.java:206
run
    NamedRunnable.java:32
runWorker
    ThreadPoolExecutor.java:1167
run
    ThreadPoolExecutor.java:641
run
    Thread.java:784

There are some suggestions in there:

1. Clear watchman watches: `watchman watch-del-all`.\n  
2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n  
3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.\n  
4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.\n

None of those work. 1: Watchman is a command that’s not found. 2: I can remove / reinstall node_modules. But the problem remains. 3: This tmp directory does not exist. 4: This tmp directory does not exist.

Hopefully, someone knows what I’m missing here.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 5
Comments: 20 (4 by maintainers)

Most upvoted comments

I got same issue and the problem was with the blacklistRE param in metro.config.js. Be sure to put /#current-cloud-backend/.*/ and NOT /amplify/*./

SebSchwartz on Jan 30, 2020

@chai86

npm install aws-amplify@1.2.4 https://stackoverflow.com/questions/15890958/how-to-install-a-previous-exact-version-of-a-npm-package

To be honest, I just installed that version right away since I was facing multiple problems integrating aws amplify in my expo project.

edreinoso on May 1, 2020

For me problem was that I had file rn-cli.config.js with this content:

module.exports = {
  resolver: {
    blacklistRE: /amplify\/.*/,
  },
};

It was added to resolve some other issue with jest loading files from amplify folder. When I removed the file it started working fine with latest version of aws-amplify. I also switched to using modular packages @aws-amplify/core and @aws-amplify/auth

RadomirPerisic on Aug 4, 2020

@elorzafe

Totally fresh project. I did what’s described here: https://aws-amplify.github.io/docs/js/start?ref=amplify-rn-btn&platform=react-native

1: Initialize expo
$ npm install expo-cli --global
$ expo init myAmplifyProject
$ cd myAmplifyProject
2: Add amplify to the project
$ yarn add @aws-amplify/api @aws-amplify/pubsub
3: Create a duplication mess in my aws account.
$ amplify init
4: Added to App.js
import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
5: Expo start:
$ expo start
And it produces the exact same error.

Hi, I think I have some idea about what might be causing this issue.

Looking at step 2 above where you say ‘Add amplify to the project’ you are actually doing:

$ yarn add @aws-amplify/api @aws-amplify/pubsub

so in your project you can then do:

import API from '@aws-amplify/api'
import PubSub from '@aws-amplify/pubsub';
import config from './aws-exports'

API.configure(config)    // Configure API
PubSub.configure(config)    // Configure PubSub

The reason you are getting the issue is, because you are trying to do:

import Amplify from 'aws-amplify';

However aws-amplify was never installed, only the PubSub and API categories were.

If you would like to use it that way you would need to do the following:

yarn add aws-amplify

Hopefully this helps resolve your issue!

Ashish-Nanda on Aug 2, 2019

I just upgraded npm. Removed node_modules and reinstalled everything but I get the exact same problem. On my iOS simulator it has an “Extra Info” button on the error page, but it’s empty. The aws-amplify, aws-amplify-react-native are present in the node_modules directory. I will keep trying but I’m out of ideas.

dionsnoeijen on Aug 1, 2019