Reputation: 421
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
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:
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.
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 import
s 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());
}
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