node module googleapis causes issues

Question

I wanted to start using Google Authentication in my nodejs webapp am using the googleapis package. The moment I require this package after installing it, I immediately get the following error:

protocol sync?8d88:2 Uncaught Error: Cannot find module './framer'
    at webpackEmptyContext (eval at ./node_modules/http2/lib/protocol sync recursive (app.js:1053), <anonymous>:2:10)
    at Array.map (<anonymous>)
    at eval (index.js?1fa7:46)
    at Object../node_modules/http2/lib/protocol/index.js (chunk-vendors.js:7788)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at Object.eval (http.js?4679:136)
    at eval (http.js:1264)
    at Object../node_modules/http2/lib/http.js (chunk-vendors.js:7711)
    at __webpack_require__ (app.js:854)

I've looked into the source here:

var modules = ['./framer', './compressor', './flow', './connection', './stream', './endpoint'];
modules.map(require).forEach(function(module) {
  for (var name in module.serializers) {
    exports.serializers[name] = module.serializers[name];
  }
});

And confirmed that those files are present:

I've already tried to reinstall the packages (http2 & googleapis) but no change. Why would those relative require statements fail? The files are clearly present.

My webapp is a client-server app using vue. Also note that this is my first little project using node so if you need any additional information on this issue from me just let me know.

Thanks in advance for the help.

Answer 1

I also faced this issue while trying to make googleapis lib work in React app. Reason is googleapis is recommended for server-side web apps.

For React/Client side web apps, I made it work following this documentation.

https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow#js-client-library