javascript - SvelteKit：500：模块“流”已被外部化以实现浏览器兼容性

Question

我正在尝试使用 WebKit 设置与 Firebase 的经过身份验证的连接。

从某种意义上说，下面的代码“有效”，我按预期从 Firebase 实时数据库接收数据。

index.svelte

<script context="module">
    // import serviceAccount from '../private/my-firebase-private-key.json'
    import { google } from 'googleapis'

    let firebaseAccessToken

    const serviceAccount = {
    "type": "service_account",
    "project_id": "my-test-project-xxxxxx",
    "private_key_id": "0d33XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
    "private_key": "-----BEGIN PRIVATE KEY-----\nXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-----END PRIVATE KEY-----\n",
    "client_email": "[e-mail]",
    "client_id": "9999999999999999999999",
    "auth_uri": "https://accounts.google.com/o/oauth2/auth",
    "token_uri": "https://oauth2.googleapis.com/token",
    "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
    "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-xxxxxx%40my-test-project-xxxxxx.iam.gserviceaccount.com"
}


    async function firebaseAuth() {
        let scopes = [
            'https://www.googleapis.com/auth/userinfo.email',
            'https://www.googleapis.com/auth/firebase.database',
        ]

        let jwtClient = new google.auth.JWT(
            serviceAccount.client_email,
            null,
            serviceAccount.private_key,
            scopes
        )

        return new Promise((
            resolve,
            reject
        ) =>
            jwtClient.authorize((error, tokens) => {
                if (error) {
                    console.log('Error making request to generate access token:', error)
                    reject(error)
                } else if (tokens.access_token === null) {
                    console.log(
                        'Provided service account does not have permission to generate access tokens'
                    )
                    reject(error)
                } else {
                    firebaseAccessToken = tokens.access_token
                    resolve(tokens.access_token)
                }
            })
        )
    }

    // export async function load({ page, fetch, session, context }) {
    export async function load({ fetch }) {
        await firebaseAuth()
        // console.log(`firebaseAccessToken: ${firebaseAccessToken}`)
        const res = await fetch(
            'https://myfirebasedatabase.app/jsondb.json',
            {
                headers: { 'Authorization': `Bearer ${firebaseAccessToken}` },
            }
        )
        const data = await res.json()

        if (!res.ok) {
            return {
                status: res.status,
                error: new Error('Could not fetch data'),
            }
        }

        return { props: { myData : data } } <-- DATA is RECEIVED
    }
</script>

<script>
export let myData

onMount(() => {
        console.log(myData) <---------------- NEVER EXECUTED
})
</script>

问题是 UI 显示以下错误...

500: Module "stream" has been externalized for browser compatibility and cannot be accessed in client code.

... 由该__error.svelte文件处理

<script context="module">
    export function load({ error, status }) {
        return {
            props: {
                title: `${status}: ${error.message}`
            }
        };
    }
</script>

<script>
    export let title;
</script>

<h1>{title}</h1>

我觉得它与 Vite 或其他配置有关，但我对 svelte 的经验太少，无法确定。你以前有过这种错误吗？

谢谢你的帮助。

标签： javascriptsveltevitesveltekit

Answer 1

我有同样的错误只写了这行代码

 import { google } from 'googleapis'

得到相同的错误500。

---

但是当在 svelte.config.js 文件中为 vite 服务器添加这个配置时

//svelte.config.js    
vite: {
        optimizeDeps: {
            exclude: ['googleapis']
        }
    }

得到这个错误：

The requested module '/node_modules/googleapis/build/src/index.js?v=9d844668' does not provide an export named 'google'

我在浏览器/devtools 网络选项中看到，当我使用排除时 index.js 文件的大小为 70 Kb，但当使用包含时，大小为 46 Mb。

我认为 vite 服务器尝试在客户端的 webbrowser 中加载 node_modules 纯粹是错误。

如果我找到此错误的解决方案，请务必分享解决方案

问候！。