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.

Googins

Are you importing these packages into your frontend? You can't do that. Not all npm modules can be run client side. Be mindful of what environments your desired npm module can run in. – Synthesis

But isn't googleapis a client side package as mentioned here? npmjs.com/package/googleapis – Googins

"client" !== "client side". An API client is a library that makes it easy to talk to an API. The alternative to a client lib is sending manual http requests yourself, which nobody wants to do. When a package is specifically advertised as a "Node.js" module, that most likely means it can only be run on the backend. – Synthesis

Nvm, i'm wrong. I read the documention in depth, and it seems like you can indeed run this in the browser. Sorry! After reading thru some github issues, this lib was originally server side only, and then they added browser support. – Synthesis

@Andy Reimann did you manage to fix this error? Since I am also struggling with this same error. – Armilla

@Armilla I ended up switching to Auth0 and that turned out to be a very good choice. – Googins

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

Sachsen

Thanks for this! I tried to use eventstore/db-client in a React application without realizing that the package is meant for NodeJS Apps (serverside). – Hypodermic