Ionic 3 and AWS Amplify

I have an app that is hosted in an AWS S3 bucket, that uses a REST API to communicate to the back end which invokes Lambda functions via API Gateway.

I’ve recently ported the app over to use the new AWS-Amplify library to handle the authentication. Debugging and testing locally on my machine everything works fine. However, when I run a production build and push that up to the bucket and test my app in a browser I’m presented with a white screen and nothing else.

Checking the logs in the browser I get the following error

Uncaught Error: Cannot use e "__Schema" from another module or realm.

Ensure that there is only one instance of "graphql" in the node_modules
directory. If different versions of "graphql" are the dependencies of other
relied on modules, use "resolutions" to ensure only one version is installed.

After some googling I reckon the problem is down to whatever Ionic is using for minification when building with the --prod flag. If I run a dev build and deploy that, everything works fine, and like I said earlier, serving locally is all fine too. Also I should state that before using AWS-Amplify, everything worked fine.

Anyone else used Amplify in an Ionic app? Anyone had similar issues?

I’m using v3.20 of ionic cli. My package.json looks like this:

  "name": "MyApp",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "",
  "private": true,
  "config": {
    "ionic_source_map_type": "source-map",
    "ionic_webpack": "./config/webpack.config.js",
    "ionic_watch": "./config/watch.config.js"
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve",
  "dependencies": {
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/storage": "2.1.3",
    "@ngrx/core": "1.2.0",
    "@ngrx/effects": "5.0.0",
    "@ngrx/store": "4.1.1",
    "aws-amplify": "^0.4.3",
    "aws-amplify-angular": "^0.1.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "moment": "^2.22.2",
    "moment-recur-ts": "^1.3.1",
    "rxjs": "5.5.5",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  "devDependencies": {
    "@ionic/app-scripts": "3.1.5",
    "@types/node": "8.10.19",
    "typescript": "2.4.2",
    "webpack-merge": "^4.1.1"
1 Like

I’m having the same issue. Did you make any progress with this?

same issue. Please check

Later versions of Amplify have fixed the issue. I’m currently using v1.0.6