如何将 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