Sveltekit和Google-Atuth-auth-library Crash

Question

对于Nodejs来说，我希望在项目中使用Google-Auth-library，因为我需要调用云运行应用程序。我正在使用Sveltekit有几页，所有页面都很好。 我已经安装了Google-Auth-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库。它取决于节点特定的API，因此无法在浏览器上运行。

Sveltekit提供的几个功能是服务器端渲染，客户端路由和水合。这意味着，默认情况下，Sveltekit将在服务器上运行您的代码（为了在第一次加载您的站点时为完整的HTML文件提供完整的HTML文件）和客户端（以提供交互性和活泼的导航）。

由于 Google-Auth-auth-library 不支持浏览器，因此在客户端导入时会收到该错误。

有两种处理此问题的主要方法：

• 在端点和钩子中使用服务器端特定的库

  与组件不同， endpoints and and page endpoints 使远离<
  

• 应使用浏览器检查在服务器中运行的后卫代码

  如果您需要组件中的某些代码或加载才能在服务器或浏览器中运行，则可以使用浏览器环境变量：

    import {browser}从'$ app/env`;
  
  如果（浏览器）{
      somebrowseronlyCode（）;
  }
   

  这很有用，例如，通过省略SSR期间但增加客户端的组件来逐步增强组件。

  不幸的是，由于ESM的性质，您不能有条件地使用常规导入。在这些情况下，您可以使用动态导入来确保仅在特定环境中加载库：

    if（！browser）{
      导入（'Some-Server-library'）。然后（lib =＆gt; lib.dostuff（））;
  }
   

  重要

  由！！浏览器的组件中的代码仅在服务器端渲染期间运行。虽然它保证它是正确的环境，但也意味着在客户端导航期间不会再次执行它 - 它只能影响初始服务的HTML。

  另一个问题是，您必须小心不要在这些支票之外参考保护资源，否则您可能会意外地泄漏服务器和客户端之间的事情。

就您而言，第一个选择可能是正确的解决方案。 Google-Auth-auth-library 在浏览器中没有位置，您当然想在每次需要时执行代码，而不仅仅是在SSR期间。