Sekarang saya mencipta komponen menggunakan Javascript dan di sini saya menambah jawapannya.

Saya mengisytiharkan google sebagai pembolehubah global dalam app.d.ts

// See https://kit.svelte.dev/docs/types#app
    // for information about these interfaces
    declare global {
        const google: any;
        namespace App {
        }
    }
export {};

Saya mencipta fail langsing untuk mencipta komponen langsing untuk butang log masuk

let canvas: any; //Created a variable to optain a reference to rendered div element
    

dalam onMount
onMount(async () => {   
    google.accounts.id.initialize({
                client_id: "534101779287-bm07dc8v4ln4kulqbql61nsglcku74vg.apps.googleusercontent.com",
                ux_mode: "redirect",
                context: "use",
                login_uri: "http://localhost:5173/auth/callback"
            });
            google.accounts.id.renderButton(canvas, {
                width: '220',      
                theme: 'outline',
                size: 'large',
                type: 'standard',
                text: 'signin_with',
                shape: 'rectangular',
                logo_alignment: 'left',
                  
            });

    });
Kod ini akan berfungsi pada pemaparan awal, muat semula keras (Command+shift+R) dan muat semula (Command+R) 

Apabila menggunakan SvelteKit, muat semula keras diberikan pada bahagian pelayan. Kod mungkin tidak serasi dengan ini atau dilaksanakan dalam susunan yang salah.

Semak konsol untuk ralat dan alihkan kod yang mesti dijalankan pada klien ke onMount.您还可以使用 ssr Pilihan Halaman Matikan pemaparan sebelah pelayan untuk halaman tertentu sebagai pilihan terakhir.