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

Posted 2023-03-08

技术标签:

【中文标题】如何将 AWS Amplify 与 Sapper 一起使用？【英文标题】：How to use AWS Amplify with Sapper? 【发布时间】：2020-02-11 10:52:10 【问题描述】：

我的目标是在 Sapper 项目中使用 AWS Amplify。

从头开始创建 Sapper 项目（使用 webpack）然后添加 AWS Amplify 并在 dev 中运行它是成功的，但是在生产中运行它会在控制台中引发 GraphQL 错误（Uncaught Error: Cannot use e "__Schema " 来自另一个模块或领域）。

修复此错误会导致另一个错误（未捕获的 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)

此线程 (https://github.com/graphql/graphql-js/issues/1536) 给出的修复是将 GraphQL 从 0.13.0 升级到 14.0.0，不幸的是 GraphQL 0.13.0 是 AWS Amplify API 依赖项。

【问题讨论】：

首先，恭喜你写出如此有据可查的问题！我将在这里提出一个简单的建议：您是否尝试过 fork @aws-amplify/api 并将其 graphql 依赖项升级到 14.x.x？出于测试目的可能值得一试，看看是否还有其他问题。如果没有，并且它解决了您的问题，也许可以考虑提交 PR。 @Jaxx 谢谢！是的，我在 repo github.com/ehemmerlin/sapper-aws-amplify/tree/dev 的 dev 分支上 fork @aws-amplify/api 将其 graphql 依赖项升级到 14.5.8，该分支在 dev 中工作，但给出相同的“未捕获错误：无法使用来自另一个模块或领域的 e“__Schema” " 在生产中（在纱线运行构建之后；节点 __sapper__/build）。 @Jaxx 在 aws-amplify/amplify-js 上提交此问题后，将 graphql 依赖项升级到 14.x.x 的拉取请求已合并到主分支中。它解决了这个问题。感谢您指出这一点。感谢您的帮助！这是个好消息，埃里克！不客气，感谢你让这个问题变得明显，导致代码升级；这将使该模块的所有用户受益！ 【参考方案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 设置为 NODE_ENV 环境变量中的webpack 配置）：

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

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

如何做到这一点：

How to set NODE_ENV to production/development in OS X

How can I set NODE_ENV=production on Windows?

或者你可以直接弄乱 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

【讨论】：

以上是关于如何将 AWS Amplify 与 Sapper 一起使用？的主要内容，如果未能解决你的问题，请参考以下文章

如何将 AWS Amplify 控制台中的现有应用程序与 AWS Amplify CLI 连接？

如何将 React 本机导航与 Android 中的 AWS Amplify 推送通知集成？

如何将现有的 dynamo db 与 AWS Amplify 和 graphql 一起使用

将Cognito的用户信息与AWS Amplify GraphQL关联起来。

将 Cognito 中的用户信息与 AWS Amplify GraphQL 关联

Flutter 与 AWS 的集成（有和没有 Amplify）