"process is not defined" in AWS Amplify API dependency graphql 0.13.0

[ehemmerlin]

Describe the bug
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.

To Reproduce
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 (graphql/graphql-js#1536) is to upgrade GraphQL from 0.13.0 to 14.0.0 unfortunatly GraphQL 0.13.0 is an AWS Amplify API dependency.

Expected behavior
Beeing able to use AWS Amplify on a Sapper project by using an upgraded version of GraphQL.

Amplify context

• Framework Sapper
• Versions of Amplify ^1.2.2

Sample code
The repo of the code explained above: https://github.com/ehemmerlin/sapper-aws-amplify

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