如何将 AWS Amplify 与 Sapper 一起使用？

Question

My goal is to use AWS Amplify in a Sapper project.

Creating a Sapper project from scratch (using webpack) then adding AWS Amplify and running it in dev is a success, but run it in production throws a GraphQL error in the console ( Uncaught Error: Cannot use e "__Schema" from another module or realm ).

Fixing this error thows another one ( Uncaught ReferenceError: process is not defined ).

A solution is to upgrade GraphQL from 0.13.0 to 14.0.0 unfortunatly GraphQL 0.13.0 is an AWS Amplify API dependency.

Does anyone know what can be done to get AWS Amplify work with Sapper in production?

The link to the repo containing the source files is located here: https://github.com/ehemmerlin/sapper-aws-amplify

---

(Apologies for the long post but I want to be explicit)

Detailled steps

1/ Create a Sapper project using webpack ( https://sapper.svelte.dev ).

npx degit "sveltejs/sapper-template#webpack" my-app
cd my-app
yarn install

2/ Add AWS Amplify ( https://serverless-stack.com/chapters/configure-aws-amplify.html ) and lodash

yarn add aws-amplify
yarn add lodash

3/ Configure AWS Amplify ( https://serverless-stack.com/chapters/configure-aws-amplify.html )

Create src/config/aws.js config file containing (change the values with yours but works as is for the purpose of this post):

export default {
  s3: {
    REGION: "YOUR_S3_UPLOADS_BUCKET_REGION",
    BUCKET: "YOUR_S3_UPLOADS_BUCKET_NAME"
  },
  apiGateway: {
    REGION: "YOUR_API_GATEWAY_REGION",
    URL: "YOUR_API_GATEWAY_URL"
  },
  cognito: {
    REGION: "YOUR_COGNITO_REGION",
    USER_POOL_ID: "YOUR_COGNITO_USER_POOL_ID",
    APP_CLIENT_ID: "YOUR_COGNITO_APP_CLIENT_ID",
    IDENTITY_POOL_ID: "YOUR_IDENTITY_POOL_ID"
  }
};

Add the following code to the existing code in src/client.js :

import config from './config/aws';

Amplify.configure({
  Auth: {
    mandatorySignIn: true,
    region: config.cognito.REGION,
    userPoolId: config.cognito.USER_POOL_ID,
    identityPoolId: config.cognito.IDENTITY_POOL_ID,
    userPoolWebClientId: config.cognito.APP_CLIENT_ID
  },
  Storage: {
    region: config.s3.REGION,
    bucket: config.s3.BUCKET,
    identityPoolId: config.cognito.IDENTITY_POOL_ID
  },
  API: {
    endpoints: [
      {
        name: "notes",
        endpoint: config.apiGateway.URL,
        region: config.apiGateway.REGION
      },
    ]
  }
});

4/ Test it

In dev (yarn run dev): it works

In production (yarn run build; node __sapper__/build): it throws an 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.
https://yarnpkg.com/en/docs/selective-version-resolutions
Duplicate "graphql" modules cannot be used at the same time since different
versions may have different capabilities and behavior. The data from one
version used in the function from another could produce confusing and
spurious results.

5/ Fix it

Following the given link ( https://yarnpkg.com/en/docs/selective-version-resolutions ) I added this code to package.json file:

  "resolutions": {
    "aws-amplify/**/graphql": "^0.13.0"
  }

6/ Test it

rm -rf node_modules; yarn install

Throws another error in the console (even in dev mode).

Uncaught ReferenceError: process is not defined
at Module../node_modules/graphql/jsutils/instanceOf.mjs (instanceOf.mjs:3)
at \_\_webpack_require\_\_ (bootstrap:63)
at Module../node_modules/graphql/type/definition.mjs (definition.mjs:1)
at \_\_webpack_require\_\_ (bootstrap:63)
at Module../node_modules/graphql/type/validate.mjs (validate.mjs:1)
at \_\_webpack_require\_\_ (bootstrap:63)
at Module../node_modules/graphql/graphql.mjs (graphql.mjs:1)
at \_\_webpack_require\_\_ (bootstrap:63)
at Module../node_modules/graphql/index.mjs (main.js:52896)
at \_\_webpack_require\_\_ (bootstrap:63)

A fix given by this thread ( https://github.com/graphql/graphql-js/issues/1536 ) is to upgrade GraphQL from 0.13.0 to 14.0.0 unfortunatly GraphQL 0.13.0 is an AWS Amplify API dependency.

Answer 1

When building my project (I'm using npm and webpack), I got this warning,

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults 
for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

which seems to be related to the schema error, as these posts indicate that the quickest fix for the error is to set NODE_ENV to production in your environment ( mode is set to the NODE_ENV environment variable in the webpack config):

https://github.com/aws-amplify/amplify-js/issues/1445

https://github.com/aws-amplify/amplify-js/issues/3963

How to do that:

How to set NODE_ENV to production/development in OS X

How can I set NODE_ENV=production on Windows?

Or you can mess with the webpack config directly:

https://gist.github.com/jmannau/8039787e29190f751aa971b4a91a8901

Unfortunately some posts in those GitHub issues point out the environment variable change might not work out for a packaged app, specifically on mobile.

These posts suggest that disabling the mangler might be the next best solution:

https://github.com/graphql/graphql-js/issues/1182

https://github.com/rmosolgo/graphiql-rails/issues/58

---

For anyone just trying to get the basic Sapper and Amplify setup going, to reproduce this error or otherwise, I build up mine with:

npm install -g @aws-amplify/cli

npx degit "sveltejs/sapper-template#webpack" my-app

npm install

npm install aws-amplify

npm install lodash (Amplify with webpack seems to need this)

amplify configure

npm run build

amplify init (dev environment, VS Code, javascript, no framework, src directory, __sapper__\build distribution directory, default AWS profile. This generates aws-exports.js .

In src/client.js :

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

npm run build