Alexandre Alves
Alexandre Alves

Reputation: 421

Sveltekit and google-auth-library crash

Being new to NodeJS, I'm looking to use the google-auth-library in my project as I need to call a Cloud Run app. I'm using SvelteKit have a couple of pages and all works fine. I've installed the google-auth-library and adding this single line in the page that I want to call the Cloud Run crashed the app.

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

The error I get:

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

So far, I have not found a way to fix this. Any ideas on the possible cause for this behaviour and how I can fix it?

Upvotes: 0

Views: 1037

Answers (1)

mrkishi
mrkishi

Reputation: 5942

google-auth-library is a Node.js-only library. It depends on Node-specific APIs and thus it can't run on the browser.

A couple of features provided by SvelteKit are server-side rendering and client-side routing and hydration. This means that, by default, SvelteKit will run your code both on the server (in order to serve a complete HTML file the first time users load your site) and on the client (in order to provide interactivity and snappy navigation).

Since google-auth-library doesn't support the browser, you get that error when it's imported in the client.

There are two main approaches to deal with this:

  • Use server-side-specific libraries in endpoints and hooks

    Unlike components, 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 are a fetch() away.


  • Guard code that should run in the server with browser checks

    If you need some code inside a component or in load to run exclusively in the server or the browser, you can use the browser environment variable:

    import { browser } from `$app/env`;
    
    if (browser) {
        someBrowserOnlyCode();
    }
    

    This is useful, for example, for progressively enhancing components by omitting things during SSR but augmenting the component on the client.

    Unfortunately, due to the nature of ESM you can't use regular imports conditionally. In these cases, you can use dynamic imports to ensure a library is only loaded in a specific environment:

    if (!browser) {
        import('some-server-library').then(lib => lib.doStuff());
    }
    
    Important

    Code in components guarded by !browser will only run during server-side rendering. While it guarantees it's the right environment, it also means the it will not be executed again during client-side navigation — it can only affect the initial served HTML.

    Another issue is that you have to be careful not to reference guarded resources outside these checks, or else you could accidentally leak things between server and client.

In your case, it's likely that the first option would be the right solution. google-auth-library has no place in the browser, and you'd certainly want to execute your code every time it's needed, not only during SSR.

Upvotes: 1

Related Questions