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

[dionsnoeijen]

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.

[elorzafe]

@dionsnoeijen what is your package.json?

[dionsnoeijen]

@elorzafe

Hereby :)

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "test": "jest --watchAll"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/samples": "~3.0.3",
    "@expo/vector-icons": "^10.0.3",
    "@react-navigation/web": "^1.0.0-alpha.9",
    "aws-amplify": "^1.1.33",
    "aws-amplify-react-native": "^2.1.16",
    "expo": "^34.0.1",
    "expo-asset": "^6.0.0",
    "expo-constants": "6.0.0",
    "expo-font": "~6.0.1",
    "expo-web-browser": "6.0.0",
    "react": "16.8.3",
    "react-dom": "^16.8.6",
    "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
    "react-native-gesture-handler": "~1.3.0",
    "react-native-web": "^0.11.4",
    "react-navigation": "^3.11.0"
  },
  "devDependencies": {
    "babel-preset-expo": "^6.0.0",
    "jest-expo": "^34.0.0"
  },
  "private": true
}

[dionsnoeijen]

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]

I have been trying to downgrade dependencies, but that throws me down a dependency rabbit hole where I don't want to be. Something else I found is that all aws-amplify related packages have the same problem. Unable to resolve "aws-amplify-react" from "App.js" Failed building JavaScript bundle. The same is true for import 'amplify'

[elorzafe]

are you using create-react-native-app cli? or react-native cli?

[dionsnoeijen]

I used expo-cli 3.0.6 to create the app. I will just upgrade expo to 3.0.8 and redo everything, see what will happen.

[dionsnoeijen]

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

[dionsnoeijen]

Also, I have an older project here with this packages.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "aws-amplify": "^1.1.19",
    "aws-amplify-react-native": "^2.1.7",
    "expo": "^32.0.0",
    "expo-graphics": "^1.0.3",
    "expo-three": "^3.0.0-alpha.8",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    "react-native-elements": "^1.0.0",
    "react-navigation": "^3.3.0",
    "three": "^0.101.1"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0"
  },
  "private": true
}

In my App.js I have the same lines of code, but it's running perfectly.

[Ashish-Nanda]

@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!

[dionsnoeijen]

@Ashish5591 That would have been great! But no, it's not solving the issue. In the pacakge.json those are included:

"aws-amplify": "^1.1.33",
"aws-amplify-react-native": "^2.1.16",

Thanks for looking into it.

According to the error it seems the problem has to do something with the haste module. does not exist in the Haste module map After looking into what this haste module might be I can only find this is a long-gone facebook module. I have no Idea what it used to do? So what is this haste module anyway?

[dionsnoeijen]

At this point it would really help me if one of the creators can let me know if they experience the same thing, meaning this is a bug. Or it's something only I experience. I'm completely stuck right at the first line of code I'm trying to make with Amplify.

[dionsnoeijen]

So... I just started anew with react-native-cli. This works. Amplify icm expo does not work ... if anyone here cares?

[Luckygirlllll]

I have used aws-amplify in expoKit and it was working fine, however, I'm getting the same error in bare expo workflow, any updates regarding this issue?

[SebSchwartz]

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\/./

[edreinoso]

After spending couple of hours trying to figure this out, I downgraded the aws-amplify version to the one that was working before with my expo app. Once I downgraded it, it worked perfectly fine.

I was wondering why it was working before and not now, and it seems like the newer versions of amplify are yet not working with react-native/expo projects.

Hope this helps!

[chai86]

@edreinoso Which commands did you use to downgrade the aws-amplify version?

[edreinoso]

@chai86

npm install [email protected]
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.

[jacola]

On a new project following the Amplify tutorial, I had the same issue (not using Expo). Installing 1.2.4 fixed it for me too.

[RadomirPerisic]

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