"ReferenceError: process is not defined" When running in Browser/Deno/WebContainers/esbuild/Webpack 5/Vite

[FossPrime]

Thanks for stopping by to let us know something could be better!

1. Is this a client library issue or a product issue? Yes.

2. Did someone already solve this? No.

Environment details

• Node.js version: 16
• npm version: 7.17
• @google-cloud/storage version: 5.19.2

Steps to reproduce

1. Attempt to run the upload from memory example on the browser.

Expected

Running from the browser should work as long as the user has a service account key.

Actual

A mysterious dependency on process arises... Why would you need to access the process to write from a JavaScript string.

And after implementing the googleapis/gaxios#337 (comment) workaround or googleapis/gaxios#483

safe-buffer depends on the non-WHATWG Node.js built-in Buffer module.

Example Code:

Runnable in https://vite.new/vite-ts

import { getSecrets } from './secrets'
import { Storage } from '@google-cloud/storage'
import './style.css'

const bucketName = 'my-bucket'
const contents = 'these are my file contents'
const destFileName = `file-${Date.now}.txt`

class UI {
  promise: Promise<void>
  appEl: HTMLDivElement
  storage!: Storage
  gscKey: any
  secrets: any

  constructor() {
    this.appEl = document.querySelector<HTMLDivElement>('#app')!
    this.promise = this.main()
    this.appEl.innerHTML = `<h1>Hello Vite!</h1>`
  }

  async main() {
    this.secrets = await getSecrets()
    this.gscKey = this.secrets.GCS_KEY
    this.storage = new Storage({
      projectId: this.gscKey.project_id,
      credentials: this.gscKey
    })
    await this.uploadFromMemory()
  }

  async uploadFromMemory() {
    await this.storage.bucket(bucketName).file(destFileName).save(contents)

    console.log(
      `${destFileName} with contents ${contents} uploaded to ${bucketName}.`
    )
  }
}

new UI()

Workaround

1. Use https://www.npmjs.com/package/@azure/storage-blob instead (Browsers supported since July 2020). You can use cloudflare or an Nginx reverse proxy to mask their URL's in order to make it portable.

Related:

• Feature: browser support gaxios#337
• Option to not rely on the local file system? gcs-resumable-upload#347
• fix!: remove configstore #1871

[shaffeeullah]

Hi @rayfoss ,

This client library is not currently supported in the browser. We are working toward getting this supported in the future.

[shaffeeullah]

I've created a feature request to track this #1883

[shaffeeullah]

Hi @rayfoss ,
Have you considered using signed URLs to perform this upload? https://cloud.google.com/storage/docs/access-control/signing-urls-with-helpers#storage-signed-url-object-nodejs This would allow you to perform this upload using a PUT request without needing the client library in the the browser

[FossPrime]

Hi @rayfoss , Have you considered using signed URLs to perform this upload? cloud.google.com/storage/docs/access-control/signing-urls-with-helpers#storage-signed-url-object-nodejs This would allow you to perform this upload using a PUT request without needing the client library in the the browser

Thanks for the suggestion, unfortunately this will not work. I built a tool used by employees that's built in and runs on StackBlitz's Node.js WebContainers. It clones git repositories, manipulates them and publishes to APIs... the last thing I need to do is automate the static asset upload process, which apparently can't be done with Google Cloud Storage at the moment.