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

Question

Today I initialized a new react native project with Amplify.

This question is also here (https://github.com/aws-amplify/amplify-js/issues/3776), but I don't know if there's anyone here that might be able to help.

I don't even know what could cause the problem I describe, a push in the right direction so I can fix it myself would be great!

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.
2. Delete the node_modules folder: rm -rf node_modules && npm install.\
3. Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-* or npm start -- --reset-cache.
4. Remove haste cache: rm -rf /tmp/haste-map-react-native-packager-*.

None of those work:

1. Watchman is a command that's not found.
2. I can remove /, reinstall node_modules; but the problem persist.
3. This tmp directory does not exist.
4. This tmp directory does not exist.

Hopefully, someone knows what I'm missing here.

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.

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'

{
  "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
}

Answer 1

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!