如何將 AWS Amplify 與 Sapper 一起使用？

Question

我的目標是在Sapper項目中使用AWS Amplify 。

從頭開始創建一個 Sapper 項目（使用 webpack）然后添加 AWS Amplify 並在開發中運行它是成功的，但是在生產中運行它會在控制台中引發 GraphQL 錯誤（未捕獲的錯誤：無法使用來自另一個模塊的 e“__Schema”或 realm ）。

修復此錯誤會導致另一個錯誤（未捕獲的 ReferenceError：未定義進程）。

一個解決方案是將 GraphQL 從 0.13.0 升級到 14.0.0 不幸的是 GraphQL 0.13.0 是 AWS Amplify API 依賴項。

有誰知道如何讓 AWS Amplify 在生產中與 Sapper 一起工作？

包含源文件的 repo 鏈接位於此處： https://github.com/ehemmerlin/sapper-aws-amplify

---

（為長篇道歉，但我想明確一點）

詳細步驟

1/ 使用 webpack ( https://sapper.svelte.dev ) 創建一個 Sapper 項目。

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

2/ 添加 AWS Amplify ( https://serverless-stack.com/chapters/configure-aws-amplify.html ) 和 lodash

yarn add aws-amplify
yarn add lodash

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

創建src/config/aws.js配置文件，其中包含（使用您的更改值，但按本文的目的工作）：

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

將以下代碼添加到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/ 測試它

在開發（紗線運行開發）中：它有效

在生產中（紗線運行構建；節點 __sapper__/build）：它會引發錯誤。

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/ 修復它

按照給定的鏈接（ https://yarnpkg.com/en/docs/selective-version-resolutions ）我將此代碼添加到 package.json 文件：

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

6/ 測試它

rm -rf node_modules; yarn install

在控制台中引發另一個錯誤（即使在開發模式下）。

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

在構建我的項目時（我正在使用 npm 和 webpack），我收到了這個警告，

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/

這似乎與架構錯誤有關，因為這些帖子表明該錯誤的最快修復是在您的環境中將NODE_ENV設置為production （ mode設置為 webpack 配置中的 NODE_ENV 環境變量）：

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

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

怎么做：

如何在 OS X 中將 NODE_ENV 設置為生產/開發

如何在 Windows 上設置 NODE_ENV=production？

或者你可以直接弄亂 webpack 配置：

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

不幸的是，這些 GitHub 問題中的一些帖子指出，環境變量更改可能不適用於打包的應用程序，特別是在移動設備上。

這些帖子表明禁用 mangler 可能是下一個最佳解決方案：

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

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

---

對於任何試圖獲得基本 Sapper 和 Amplify 設置、重現此錯誤或其他情況的人，我構建了我的：

npm install -g @aws-amplify/cli

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

npm install

npm install aws-amplify

npm install lodash （用webpack放大好像需要這個）

amplify configure

npm run build

amplify init （開發環境，VS Code，javascript，無框架， src目錄， __sapper__\build分發目錄，默認 AWS 配置文件。這會生成aws-exports.js 。

在src/client.js中：

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

npm run build