Search code examples
node.jsvue.jsgoogle-cloud-platformgrpcgoogle-speech-api

Module @google-cloud/speech not supported for Vue JS?

I'm playing with the Google Cloud API Speech-to-Text Node client library. Works quite well, and well described in their documentation. Problems come when I wanted to use it in a VueJS : it simply seems not to be supported.

First attempt : npm run serve returns

 ERROR  Failed to compile with 3 errors                                                                                                                                                                                                                                 11:35:13

This dependency was not found:

* http2 in ./node_modules/@grpc/grpc-js/build/src/channel.js, ./node_modules/@grpc/grpc-js/build/src/subchannel.js and 1 other

But http2 is a core module in Node now, and when I run node -p http2 I do get results.

Second attempt :

  • npm i http2
  • npm run serve returns
 WARNING  Compiled with 1 warnings                                                                                                                                                                                                                                      11:41:07

 warning  in ./node_modules/http2/lib/protocol/index.js

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
  • In browser, console provides error
Uncaught Error: not supported
    at Root.loadSync (root.js?ee6e:234)
    at Object.loadSync (index-light.js?071f:69)
    at Object.eval (index.js?f193:244)
    at eval (index.js:250)
    at Object../node_modules/@grpc/proto-loader/build/src/index.js (app.js:1383)
    at __webpack_require__ (app.js:724)
    at fn (app.js:101)
    at Object.eval (grpc.js?6f5f:34)
    at eval (grpc.js:288)
    at Object../node_modules/google-gax/build/src/grpc.js

My Vue App is basic and can be retrieved using vue-cli by running vue create app. I then added in the HelloWorld Component the basic code displayed in the quickstart guide.

My theory is : VueJS can't use google-gax module due to gRPC. What do you think ?

Solution

  • Currently the Google Cloud API client libraries such as the one you are using cannot be used from the browser. As you noted, those libraries use gRPC, which in turn uses http2. The problem is that currently no major browser allows JavaScript libraries to use the full functionality of the HTTP/2 protocol, so there is currently no complete browser shim for the Node http2 module.

    The http2 module you got from npm is a different library with a different API. It most likely also does not work in the browser for the same reason.