Ionic 3 production builds not working after installing amplify

[johneast]

Do you want to request a feature or report a bug?
A bug

What is the current behavior?
After building the app with the ionic build --prod command and deploying to S3 for hosting, the following error is found in the browser console

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.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than AWS Amplify.

Install the ionic framework and create a new app, install amplify

ionic start myapp sidemenu
cd myapp
npm i aws-amplify aws-amplify-angular --save

import AmplifyAngularModule and AmplifyService in app.module.ts, for instance:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { AmplifyAngularModule, AmplifyService } from 'aws-amplify-angular';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage
  ],
  imports: [
    BrowserModule,
    AmplifyAngularModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    AmplifyService,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Run a production build:

ionic build --prod

Deploy the built app to S3 bucket and try to load it in a browser. App fails to load.

What is the expected behavior?
Browser should load the app when navigating to the correct URL

Which versions of Amplify, and which browser / OS are affected by this issue? Did this work in previous versions?
aws-amplify v0.4.4
aws-amplify-angular v0.1.4
Seen bug in Safari and Chrome on Mac and iOS
Prior to installing amplify building and deploying ionic apps worked.

You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = 'DEBUG'; in your app.

[haverchuck]

Hi @johneast ,

We recently addressed some issues related to Angular's AOT compilation, which could be part of the issue here. I was just able to successfully do a prod build in an ionic app using AOT Amplify patch. I'm closing this issue for now, but if you find that the latest Amplify deployment doesn't fix your problem please speak up.

Thanks!

[haverchuck]

Reopened issue - investigating whether this is truly related to AOT.

[johneast]

I've rebuilt and redeployed with the latest version and can confirm it works now.

[johneast]

After production builds working for a little while, this issue has come back and I'm getting the same error again.

My package.json looks like

{
  "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.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@angular/router": "5.2.11",
    "@ionic-native/core": "4.8.0",
    "@ionic-native/splash-screen": "4.8.0",
    "@ionic-native/status-bar": "4.8.0",
    "@ionic/storage": "2.1.3",
    "@ngrx/core": "1.2.0",
    "@ngrx/effects": "5.0.0",
    "@ngrx/store": "4.1.1",
    "aws-amplify": "1.0.6",
    "aws-amplify-angular": "1.0.4-unstable.2",
    "html2pdf.js": "^0.9.0",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "jspdf": "^1.4.1",
    "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/jspdf": "^1.1.31",
    "@types/node": "8.10.19",
    "typescript": "2.7.2",
    "webpack-merge": "^4.1.3"
  }
}

I've completely removed my node_modules folder and re-installed everything and this didn't fix the issue. Production builds consistently give me the above graphql error.

It's weird that the problem went away and then came back again. I can't figure out what has changed.

Other environment settings
node: v8.11.1
npm: v5.6.0
ionic: v4.0.6

[johneast]

Looking into this a bit more. Amplify works with production builds with Ionic 4, but not with Ionic 3. I think when I reported it was working, that was with my Ionic 4 project, and not my Ionic 3 project. Apologies for the confusion.

[svzi]

I'm stuck with the same error message. I can't run my Ionic 3 production build anymore. :-(

Error message:

[INFO:CONSOLE(1)] "Uncaught Error: Cannot use e "__Schema" from another module or realm.
 I  Ensure that there is only one instance of "graphql" in the node_modules
 I  directory. If different versions of "graphql" are the dependencies of other
 I  relied on modules, use "resolutions" to ensure only one version is installed.
 I  https://yarnpkg.com/en/docs/selective-version-resolutions
 I  Duplicate "graphql" modules cannot be used at the same time since different
 I  versions may have different capabilities and behavior. The data from one
 I  version used in the function from another could produce confusing and
 I  spurious results.", source: http://localhost:8080/build/vendor.js (1)

I'm using this libs:

    "aws-amplify": "^1.0.4",
    "aws-amplify-angular": "^1.0.2",

Any help would be really much appreciated!

[johneast]

Out of interest @svzi have you tried it with the latest 1.0.4-unstable.* of aws-amplify-angular? AWS did say that there was a problem with AOT that was fixed in that version. I'd be interested to know if it fixes the issues for you.

Also, I note, there is a new version of aws-amplify-angular (2.0.0), although I don't know what version of angular it is compatible with.

[johneast]

I've also just noticed that Amplify now supports modular imports. I don't know about your use case, but I'm not using the graphql part of amplify so I'm going to see if only importing what I need fixes the issue.

[johneast]

Putting this here in case anyone else has a similar issue and they want to know how to get around it.

In my use case, I'm not using AppSync so have no need for graphql, this meant I was able to get around the problem by using the modular imports of amplify and only import what I needed, rather than importing the entire amplify library.

See https://github.com/aws-amplify/amplify-js/wiki/Amplify-modularization

So instead of

import Amplify from 'aws-amplify';

I have

import Amplify from '@aws-amplify/core'

Currently, the AmplifyService in the aws-amplify-angular module doesn't support modular imports, so I made my own until the official one does. It looks a little like this:

import { Injectable } from '@angular/core';
import Amplify  from '@aws-amplify/core';
import Auth, { AuthClass } from '@aws-amplify/auth';
import PubSub from '@aws-amplify/pubsub';

@Injectable()
export class AmplifyService {

  private _auth: AuthClass;
  private _pubsub: any;

  constructor() {
    // According to the docs, this shouldn't be necessary, but without it I couldn't get it to work
    Amplify.Auth = Auth;
    Amplify.PubSub = PubSub;

    this._auth = Amplify.Auth;
    this._pubsub = Amplify.PubSub;
  }

  auth(): AuthClass {
    return this._auth;
  }

  pubsub(): any {
    return this._pubsub;
  }
}

For my application, I only need auth and pubsub, so that's all I'm importing.

[edgarelc]

I'm also facing this issue. I tried aws-amplify 1.0.8 and aws-amplify-angular 2.0.0 and it still doesn't work. I did some digging in my node_modules folder and I found that AWS Amplify defines graphql version 0.11.7 in its package-lock.json file (node_modules/aws-amplify/package-lock.json) but the API module uses 0.13.0 in its package.json file (node_modules/@aws-amplify/api/package.json). That might be the problem. Still haven't found a solution...

Thanks for the workaround @johneast. It' a great approach but I need to use the API module and that one has graphql dependency.

Any other information/suggestion is appreciated :)

[svzi]

@johneast Thank you very much for your feedback and suggestion. I've updated aws-amplify to 1.0.8 and aws-amplify-angular to 1.0.5, but neither does solve my issue.

I've also tried your solution by implementing my own AmplifyService class, but with your version it doesn't work. I'm only using Auth so far, but in my app I'm listening for the authChanged event like this:

this.amplify.authStateChange$.subscribe(authState => {
	this.handleCognitoAuthenticationState(authState);
});

I didn't find the source code of aws-amplify-angular, so I couldn't have a look at how to implement because I'm not familar with the aws-amplify library itself.

For that reason I'm waiting for an out-of-the-box solution that simply works.

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.