TypeError: Amplify.configure is not a function with SvelteKit + Amplify AWS

Question

我正在使用 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) and here (https://github.com/aws-amplify/amplify-ui/issues/268)。

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

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

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

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

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

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

Answer 1

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

Answer 2

我必须将 Amplify 更改为命名导入，以便在构建后进行预览。

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

如果有人在使用 Amplify + SvelteKit 时遇到 'dev' 问题，将以下内容添加到 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

TypeError: Amplify.configure is not a function with SvelteKit + Amplify AWS

TypeError: Amplify.configure is not a function with SvelteKit + Amplify AWS

amazon-web-services

amazon-cognito

aws-amplify

vite

sveltekit