Sveltekit 和 google-auth-library 崩溃

Question

作为 NodeJS 的新手，我希望在我的项目中使用 google-auth-library，因为我需要调用 Cloud 运行应用程序。我正在使用 SvelteKit 有几个页面，一切正常。我已经安装了 google-auth-library 并在我想调用云的页面中添加这一行运行使应用程序崩溃。

import {GoogleAuth} from 'google-auth-library';

我得到的错误：

500

process is not defined

loadProxy@http://localhost:3000/node_modules/.vite/deps/google-auth-library.js?v=de891e38:1312:23
node_modules/gcp-metadata/node_modules/gaxios/build/src/gaxios.js@http://localhost:3000/node_modules/.vite/deps/google-auth-library.js?v=de891e38:1318:5
__require@http://localhost:3000/node_modules/.vite/deps/chunk-OO5LXEG7.js?v=de891e38:26:50
node_modules/gcp-metadata/node_modules/gaxios/build/src/index.js@http://localhost:3000/node_modules/.vite/deps/google-auth-library.js?v=de891e38:1521:20
__require@http://localhost:3000/node_modules/.vite/deps/chunk-OO5LXEG7.js?v=de891e38:26:50
node_modules/gcp-metadata/build/src/index.js@http://localhost:3000/node_modules/.vite/deps/google-auth-library.js?v=de891e38:3386:20
__require@http://localhost:3000/node_modules/.vite/deps/chunk-OO5LXEG7.js?v=de891e38:26:50
node_modules/google-auth-library/build/src/auth/googleauth.js@http://localhost:3000/node_modules/.vite/deps/google-auth-library.js?v=de891e38:25077:23
__require@http://localhost:3000/node_modules/.vite/deps/chunk-OO5LXEG7.js?v=de891e38:26:50
node_modules/google-auth-library/build/src/index.js@http://localhost:3000/node_modules/.vite/deps/google-auth-library.js?v=de891e38:25757:24
__require@http://localhost:3000/node_modules/.vite/deps/chunk-OO5LXEG7.js?v=de891e38:26:50
@http://localhost:3000/node_modules/.vite/deps/google-auth-library.js?v=de891e38:25838:35

到目前为止，我还没有找到解决这个问题的方法。关于此行为的可能原因以及如何解决的任何想法？

Answer 1

google-auth-library 是一个 Node.js-only 库。它依赖于 Node-specific API，因此它不能在浏览器上运行。

SvelteKit 提供的几个功能是 server-side 渲染和 client-side 路由和水合作用。这意味着，默认情况下，SvelteKit 将运行服务器上的代码（以便在用户首次加载您的网站时提供完整的 HTML 文件）和客户端上的代码（以便提供交互性和活泼的导航）。

由于 google-auth-library 不支持浏览器，因此在客户端导入时出现该错误。

有两种主要的处理方法：

在端点和挂钩中使用 server-side 特定的库

与组件不同，endpoints and hooks run exclusively in the server, so you're free to use server-side dependencies there. Page endpoints make it especially convenient to migrate away from load in these cases, but otherwise standalone endpoints 相距 fetch()。
应该运行在服务器中用浏览器检查的保护代码

如果您需要在组件内部或 load 到运行独占服务器或浏览器中的一些代码，您可以使用 browser 环境变量：
```
import { browser } from `$app/env`;

if (browser) {
    someBrowserOnlyCode();
}
```
这很有用，例如，通过在 SSR 期间省略某些内容但在客户端增加组件来逐步增强组件。

遗憾的是，由于 ESM 的性质，您不能有条件地使用常规 imports。在这些情况下，您可以使用动态导入来确保库仅在特定环境中加载：
```
if (!browser) {
    import('some-server-library').then(lib => lib.doStuff());
}
```
重要

!browser 保护的组件中的代码在 server-side 渲染期间将仅运行。虽然它保证它是正确的环境，但这也意味着它不会在 client-side 导航期间再次执行 — 它只会影响初始服务 HTML.

另一个问题是你必须小心不要在这些检查之外引用受保护的资源，否则你可能会不小心在服务器和客户端之间泄漏东西。

对于您的情况，第一个选项可能是正确的解决方案。 google-auth-library 在浏览器中没有位置，您肯定希望每次需要时都执行您的代码，而不仅仅是在 SSR 期间。

Sveltekit 和 google-auth-library 崩溃

Sveltekit and google-auth-library crash

node.js

google-auth-library

sveltekit

在端点和挂钩中使用 server-side 特定的库

应该运行在服务器中用浏览器检查的保护代码

重要