TypeError：Amplify.configure 不是 SvelteKit + Amplify AWS 的功能答案

【问题标题】：TypeError: Amplify.configure is not a function with SvelteKit + Amplify AWSTypeError：Amplify.configure 不是 SvelteKit + Amplify AWS 的功能
【发布时间】：2021-10-29 15:17:55
【问题描述】：

我正在使用 AWS Amplify 对新的 SvelteKit FE 进行一些操作，以使用 Cognito 服务对我的应用程序进行身份验证，并且一切都在开发模式下运行良好。但后来，我尝试构建它以进行部署，这就是有趣的开始......

首先，我无法简单地构建应用程序。 Vite 出现错误，无法正确“解释”“浏览器”字段！？：

'request' is not exported by __vite-browser-external, imported by node_modules/@aws-sdk/credential-provider-imds/dist/es/remoteProvider/httpRequest.js

此问题记录在此处 (https://github.com/aws/aws-sdk-js/issues/3673) 和此处 (https://github.com/aws-amplify/amplify-ui/issues/268)。

我应用了建议的解决方案，但 ErikCH 在 svelte.config.cjs 文件中添加了一个别名：

resolve: {
        alias: {
          "./runtimeConfig": "./runtimeConfig.browser"
        }
      }

所以现在，自从应用程序顺利构建以来，我又回到了正轨。但是后来，我尝试使用“npm run preview”运行应用程序，但它在这条消息上停止了：

TypeError: Amplify.configure is not a function

我仔细检查了我的代码，没有发现任何缺失或不合适的地方。这是该函数的导入和调用：

...
import Amplify from '@aws-amplify/core';
import Auth from "@aws-amplify/auth";
import awsconfig from "../aws-exports";

Amplify.configure(awsconfig);
...

如前所述，该项目以开发模式运行，全部使用纯 Javascript，没什么特别的。我更新到最新的包...这里是我的实际版本：

@sveltejs/kit": "^1.0.0-next.159
vite v2.5.1
"aws-amplify": "^4.2.5"
node v14.17.5
npm v7.21.1

我看到 cmets 关于完全删除 Amplify 库并编写包装器以直接调用 Cognito，但我发现这不是很有效率和麻烦。所以，我最后的办法是调用 Stackoverflow 来救援！ ;-)

Edit #1 我意识到这个错误发生在 app.js 中，即 FE 应用程序的服务器端。这个不对。这必须在浏览器中运行。怎么会出现在服务器端？？？

【问题讨论】：

这是什么runtimeConfig.js 文件？我没有。

标签： amazon-web-services amazon-cognito aws-amplify vite sveltekit

【解决方案1】：

我不完全确定这是否能让您走上正轨，但帮助我解决包导入怪异问题的一件事是vite's optimizedDeps config directive，尤其是在开发和构建之间。也许 AWS 包中的某些东西不喜欢 vite 所做的预捆绑，您需要将其排除在外？这可能有助于解释为什么在开发中运行良好。

【讨论】：

好吧，我在 sveltekit github 上打开的一些问题中看到了这个指令，但我找不到 Amplify 库的正确值。我最终放弃了 Amplify，决定使用我真正需要的唯一库（cognito）。（参考：stackoverflow.com/questions/66701358/…）。现在它编译没有问题。

【解决方案2】：

我必须将 Amplify 更改为命名导入，以便在构建后为我工作。

import { Amplify } from '@aws-amplify/core'

如果有人遇到 Amplify + SvelteKit 的“开发”问题，将以下内容添加到 app.html 中的 <head> 标记的顶部可能会有所帮助。

    <script>
      var global = global || window
      var Buffer = Buffer || []
      var process = process || { env: { DEBUG: undefined }, version: [] }
    </script>

我的版本：

Node.js：14.18.0
@aws-amplify/auth: 4.3.11
@aws-amplify/core: 4.3.3
@sveltejs/kit: 1.0.0-next.190
打字稿：4.4.4

【讨论】：