Feature: browser support

[jasonswearingen]

Is your feature request related to a problem? Please describe.
Want 'one net io to rule them all' for use in browser and node projects

Describe the solution you'd like
switch gaxios to use isomorphic dependencies. such as cross-fetch instead of node-fetch

Describe alternatives you've considered
use a bloated complex library like axios

Additional context
I see https://github.com/googleapis/gaxios/tree/master/browser-test so I'm confused. If browser is already supported, add some info to the readme!

[JustinBeckwith]

So yeah, this totally works in the browser! We don't pre-package a minified/webpacked version in the browser, but if you follow along with our webpack config, you can make it work :)

The cross-fetch thing is funny to me. I think we just swap in regular ol browser fetch if it's available.

[jasonswearingen]

Thank you, I have verified it works with webpack.

The key is to make sure a user has this in their webpack config:

module: {
    rules: [
      {
        test: /node_modules\/https-proxy-agent\//,
        use: 'null-loader',
      },

With that, it works.

I'll leave the issue open for the docs to get updated. feel free to close at any time!

[lil5]

This still depends on the assumption that everyone is using & wants to edit their webpack configuration file.

[edward3h]

I'm using Vite instead of webpack. Is there an equivalent config setting?

I currently get an error like this when trying to use in browser.

gaxios.ts:66 Uncaught ReferenceError: process is not defined
at loadProxy (gaxios.ts:66:5)
at node_modules/gaxios/build/src/gaxios.js (gaxios.ts:75:1)
at __require (chunk-OO5LXEG7.js?v=d0f656e5:26:50)
at node_modules/gaxios/build/src/index.js (index.ts:15:1)
at __require (chunk-OO5LXEG7.js?v=d0f656e5:26:50)
at node_modules/gcp-metadata/build/src/index.js (index.ts:8:1)
at __require (chunk-OO5LXEG7.js?v=d0f656e5:26:50)
at node_modules/google-auth-library/build/src/auth/googleauth.js (googleauth.js:19:21)
at __require (chunk-OO5LXEG7.js?v=d0f656e5:26:50)
at node_modules/google-auth-library/build/src/index.js (index.js:17:22)

[edward3h]

I worked around the "process is not defined" error by adding to my vite.config.ts:

    define: {
        'process.env': {}
    }

I'll try and find answers for my next issue before commenting again here :)

[rattrayalex]

Visitors to this thread may be interested in https://github.com/developit/redaxios which wraps native fetch() with the axios API.

[bcoe]

Since this issue was opened, we've upgraded to a newer webpack, have integration tests for it, and have an example webpack config in the project root:

https://github.com/googleapis/gaxios/blob/main/webpack.config.js

Please let us know if folks continue bumping into any issues.

[asontha]

Added this to my nextjs webpack config like so:

file: next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config, options) => {
    config.module.rules.push({
      test: /node_modules\/https-proxy-agent\//,
      use: 'null-loader',
    });

    return config
  }
}

module.exports = nextConfig

Still getting this error:

[mcanaleta]

I worked around the "process is not defined" error by adding to my vite.config.ts:

    define: {
        'process.env': {}
    }

I'll try and find answers for my next issue before commenting again here :)

Didn't work for me. Instead I what works for me (vite / react) is the vite-plugin-node-polyfills plugin:

import { defineConfig } from "vite";
import { nodePolyfills } from "vite-plugin-node-polyfills";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    nodePolyfills(), // https://www.npmjs.com/package/vite-plugin-node-polyfills
  ],

//...

  },
});