无法在客户端代码中访问“buffer.Buffer”（Svelte with Userbase）

Question

我正在使用 Svelte 3.44 和 SvelteKit 编写一个应用程序。我想使用 Userbase ( https://userbase.com/ ) 进行用户身份验证和数据存储。

我有一个组件Login.svelte，我想在其中调用 Userbase API 进行注册和登录。相关代码是：

<script lang="ts">
    import userbase from 'userbase-js';
    /* Irrelevant code here */
</script>

当我尝试使用 运行此命令时vite dev，我看到的不是我的登录组件：

500

Module "buffer" has been externalized for browser compatibility. Cannot access "buffer.Buffer" in client code.

get@http://localhost:5173/node_modules/.vite/deps/userbase-js.js?v=b25ad0c3:151:17
node_modules/safe-buffer/index.js@http://localhost:5173/node_modules/.vite/deps/userbase-js.js?v=b25ad0c3:162:19
__require@http://localhost:5173/node_modules/.vite/deps/chunk-TWLJ45QX.js?v=b25ad0c3:8:50
node_modules/randombytes/browser.js@http://localhost:5173/node_modules/.vite/deps/userbase-js.js?v=b25ad0c3:225:19
__require@http://localhost:5173/node_modules/.vite/deps/chunk-TWLJ45QX.js?v=b25ad0c3:8:50
node_modules/diffie-hellman/lib/generatePrime.js@http://localhost:5173/node_modules/.vite/deps/userbase-js.js?v=b25ad0c3:3272:23
__require@http://localhost:5173/node_modules/.vite/deps/chunk-TWLJ45QX.js?v=b25ad0c3:8:50
node_modules/diffie-hellman/browser.js@http://localhost:5173/node_modules/.vite/deps/userbase-js.js?v=b25ad0c3:3554:25
__require@http://localhost:5173/node_modules/.vite/deps/chunk-TWLJ45QX.js?v=b25ad0c3:8:50
@http://localhost:5173/node_modules/.vite/deps/userbase-js.js?v=b25ad0c3:6166:37

浏览解决方案我发现两个但没有一个有效：

1. 使用 OnMount() 的动态导入似乎可行，但由于 TypeScript 类型检查，我无法在 OnMount() 之外的其他任何地方使用导入的模块。

2. 从 index.html 添加 Userbase SDK 并调用它window.userbase不起作用，因为我得到了ReferenceError: window is not defined. 如果我只在 OnMount() 中使用它，那么我又会遇到第一个问题。

总结一下：如果有人解决了这个Cannot access "buffer.Buffer" in client code问题，请告诉我你是怎么做到的。如果这是一个愚蠢的问题，请原谅，我是一名嵌入式开发人员，这是我第一次接触 Web 开发。

Answer 1

我遇到了完全相同的问题并且我已经能够解决它！

1. buffer按照@HB的正确建议安装软件包：$ npm i buffer
2. 将此片段添加到您的index.html：

<script>
/**
 * this is a hack for error: global is not defined
 */
var global = global || window
</script>

从这个 GitHub 评论中得到了这个小宝石

到目前为止我的组件逻辑是：

<script>
    import { onMount } from 'svelte';
    import userbase from 'userbase-js';

    onMount(() => {
        userbase.init({ appId: '...' })
    });
</script>

版本：

        "@sveltejs/kit": "next"
        "svelte": "^3.44.0",
        "typescript": "^4.7.4",
        "vite": "^3.0.4"