typescript 如何使用带SvelteKit的压迫板?

waxmsbnn  于 2023-01-27  发布在  TypeScript
关注(0)|答案(1)|浏览(153)

我试图在SvelteKit中显示一个桨内联 checkout 。但是我总是得到Name Paddle not found作为错误。我不能使用所有的脚本。

控制台错误:

Uncaught (in promise) ReferenceError: Paddle is not defined
   instance Checkout.svelte:7
   init index.mjs:2016
   Checkout Checkout.svelte:110
   createProxiedComponent svelte-hooks.js:341
   ProxyComponent proxy.js:242
   Proxy<Checkout> proxy.js:349
   create_fragment +page.svelte:58
   init index.mjs:2031
   Page +page.svelte:242
   createProxiedComponent svelte-hooks.js:341
   ProxyComponent proxy.js:242
   Proxy<+page> proxy.js:349
   construct_svelte_component_dev index.mjs:2232
   update root.svelte:274
   update_slot_base index.mjs:100
   update layout.svelte:40
   update index.mjs:1209
   flush index.mjs:1169
   promise callback*schedule_update index.mjs:1120
   make_dirty index.mjs:1984
   ctx index.mjs:2022
   $$set root.svelte:581
   get proxy.js:83
   $set index.mjs:2123
   key proxy.js:46
   update client.js:321
   navigate client.js:1094
   goto client.js:183
   goto client.js:1266
   routeToPage navigation.ts:4
   prepNewService SearchBar.svelte:17
   searchDB SearchBar.svelte:8
   click_handler SearchBar.svelte:25
   listen index.mjs:417
   listen_dev index.mjs:2174
   mount SearchBar.svelte:84
   m svelte-hooks.js:291
   mount_component index.mjs:1949
   mount +page.svelte:112
   m svelte-hooks.js:291
   mount_component index.mjs:1949
   update root.svelte:277
   update_slot_base index.mjs:100
   update layout.svelte:40
   update index.mjs:1209
   flush index.mjs:1169
   promise callback*schedule_update index.mjs:1120
   make_dirty index.mjs:1984
   ctx index.mjs:2022
   $$set root.svelte:581
   get proxy.js:83
   $set index.mjs:2123
   key proxy.js:46
   update client.js:321
   navigate client.js:1094
   _start_router client.js:1536
   _start_router client.js:1528
   start start.js:42
   async* new-service:20

我的组件如下所示:

<svelte:head>
        <script src="https://cdn.paddle.com/paddle/paddle.js"></script>
</svelte:head>

<script type="text/javascript" lang="js">
    Paddle.Setup({ vendor: 00000 });
    Paddle.Environment.set('sandbox');
    Paddle.Checkout.open({
        method: 'inline', // set to `inline`
        product: 12345, // replace with a product ID or plan ID
        allowQuantity: true,
        disableLogout: true,
        frameTarget: 'iframe', // className of your checkout <div>
        frameInitialHeight: 450, // `450` or above
        frameStyle: 'width:100%; min-width:312px; background-color: transparent; border: none;' });
</script>

<div id="iframe"></div>

我还尝试将script标记放在app.htmlbodyhead标记中,但将async添加到脚本中也没有任何效果。
我不知道这是否重要,但我在整个项目中使用了 typescript ,除了这里。

niwlg2el

niwlg2el1#

正如在注解中提到的,这是一个时间问题。当代码执行时,浏览器还没有完成从cdn加载脚本,解析其内容和设置Paddle类。在onMount钩子中执行这个可能会解决这个问题,并确保它只在客户端上下文中执行,而不是在服务器端执行。
而且,正如这个问题的作者自己发现的那样,似乎需要使用class而不是id。

相关问题