ImageAnnotatorClient does not work inside Electron.js

[phdggg]

Hi, I am able to use ImageAnnotatorClient to call google vision API for no problem.
But when I tried to run the same code inside Electron.js.

const client = new vision.ImageAnnotatorClient({
keyFilename: "key.json"
});

The following error occurs:

Uncaught (in promise) TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type object
at validateString (internal/validators.js:112)
at Object.basename (path.js:1157)
at GrpcClient.loadProto (grpc.ts:166)
at new ImageAnnotatorClient (image_annotator_client.ts:144)
at myfunction (/Users/XXX/Demo/mycode.js:40)
at FSReqCallback.oncomplete (fs.js:146)

It seems that the error occurred in the following code snippet inside image_annotator_client.ts

const nodejsProtoPath = path.join(
  __dirname,
  '..',
  '..',
  'protos',
  'protos.json'
);
this._protos = this._gaxGrpc.loadProto(
  opts.fallback
    ? // eslint-disable-next-line @typescript-eslint/no-var-requires
      require('../../protos/protos.json')
    : nodejsProtoPath
);

[phdggg]

I can fix this by changing this line in image_annotator_client.ts:

from
const isBrowser = typeof window !== 'undefined';
to
const isBrowser = false

I hope there is a good way to handle this, especially in the situation when people use Electron.js (having both browser and node.js)

[vishald123]

Hey @phdggg, Could you please specify more details. Nodejs version, electron version and also if you could provide your complete code. Thanks.

[alexander-fenster]

This should be working without any special changes to the client; just make sure you update your dependencies (npm ls google-gax should be >= 2.3.0). In a real browser, it will just work. In Electron, since it does not follow "browser" field in package.json, please pass {fallback: true} to the ImageAnnotatorClient constructor.

Alternatively, as discussed in googleapis/nodejs-speech#547, just use the bundler (webpack and browserify) before using the code in Electron.

You will need to authenticate as described here (with OAuth2) or possibly with an API key, as shown in the aforementioned nodejs-speech issue.

[tofutim]

@alexander-fenster I also have this issue. Can you give more details on using the bundler? how do we do that? I tried yarn upgrade google-gax@latest and const client = new vision.ImageAnnotatorClient({fallback: true}) to no avail. npm ls gives me

[email protected] /Users/tim/Projects/komika
├─┬ @google-cloud/[email protected]
│ └── [email protected]
└── [email protected]

Maybe this is the problem.... I show isBrowser is true, but the condition is !isBrowser && fallback to go to the fallback gax

If it is browser, than fallback is true, so the condition will always be false and it can never get to the fallback.

I think gaxModule should be set with this:

this._gaxModule = opts.fallback ? gax.fallback : gax;

[Pizzacus]

Here's an awful workaround:

const client = new vision.ImageAnnotatorClient({
	get fallback() {
		return false
	},
	set fallback(_) {}
});

This forcefully prevents the fallback property from being changed.
Whenever opts.fallback = true; happens, nothing is done, and it remains false (whereas making it unwritable with .defineProperty() would cause a crash).