typescript 无法访问客户端代码中的“buffer.Buffer”(使用Userbase的Svelte)

dfddblmv 于 2022-11-18 发布在 TypeScript

关注(0)|答案(3)|浏览(1491)

我正在用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运行此程序时，我看到的不是Login组件，而是：

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（）之外的任何地方使用导入的模块。
1.从index.html添加Userbase SDK并使用window.userbase调用它不起作用，因为我得到了ReferenceError: window is not defined。
总结一下：如果有人克服了Cannot access "buffer.Buffer" in client code问题，请告诉我你是怎么做到的。如果这是一个愚蠢的问题，请原谅，我是一个嵌入式开发人员，这是我第一次接触Web开发。

typescript

来源：https://stackoverflow.com/questions/73353392/cannot-access-buffer-buffer-in-client-code-svelte-with-userbase

3条答案

按热度按时间

yhived7q1#

我也遇到过同样的问题，而且我已经解决了！
1.按照@H.B.的正确建议安装buffer软件包：$ npm i buffer
1.将以下代码段添加到您的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"

赞(0）回复(0）举报 2022-11-18

5n0oy7gb2#

我无法重现这个问题，也许你使用的是不同版本的Vite。你可以尝试通过将buffer添加到ssr.noExternal来防止buffer被外部化。
我得到了一个不同的错误，它也建议模块应该只在浏览器中导入。
访问onMount之外的内容只是一个类型或作用域问题。如果您将其导入到组件中，您可以在onMount之外声明一个变量。在导入完成之前，它将是未定义的：

<script lang="ts">
    import { onMount } from 'svelte';
    import type { Userbase } from 'userbase-js';

    let userbase: Userbase | undefined;

    onMount(async () => {
        window.global = window; // If you get a "global is not defined error"
        userbase = await import('userbase-js').then(x => x.default);
    });
</script>

如果您在其他地方全局导入脚本，您应该能够访问window.userbase，模块的类型声明文件已经定义了这一点：

// Expose as userbase when loaded in an IIFE environment
export as namespace userbase

赞(0）回复(0）举报 2022-11-18

gfttwv5a3#

这个想法可能会有所帮助：Module "util" has been externalized for browser compatibility. Cannot access "util.promisify" in client code类似于以下内容：

export default defineConfig({
  resolve: {
    alias: {
      util: 'util/',
    },
  },
})

赞(0）回复(0）举报 2022-11-18

我来回答

typescript 无法访问客户端代码中的“buffer.Buffer”(使用Userbase的Svelte)

3条答案

相关问题

热门标签

最新问答