Grunt build errors using google-api-nodejs-client with webpack

Question

I am using https://www.npmjs.com/package/googleapis in a ReactJS Webpack app. This one has a caution that this is an alpha version, so problems should be expected, and here is the one I have.

npm install googleapis --save installed googleapis ok, added "googleapis": "^2.0.2" in my .json package, but when I run grunt build I get the following warnings (followed by many errors that I will post by request, as this is a lot of text):

 WARNING in ./~/googleapis/apis/index.js Critical dependencies: 41:23-44 the request of a dependency is an expression @ ./~/googleapis/apis/index.js 41:23-44 WARNING in ./~/googleapis/~/request/~/hawk/~/hoek/lib/index.js Critical dependencies: 403:34-60 the request of a dependency is an expression @ ./~/googleapis/~/request/~/hawk/~/hoek/lib/index.js 403:34-60 

The line of violation in ~/googleapis/apis/index.js is:

 var Endpoint = require(endpointPath); 

One of the errors I get:

 ERROR in ./~/googleapis/~/request/~/hawk/~/hoek/lib/index.js Module not found: Error: Cannot resolve module 'fs' in /Users/dev/wwb-web-app/node_modules/googleapis/node_modules/request/node_modules/hawk/node_modules/hoek/lib @ ./~/googleapis/~/request/~/hawk/~/hoek/lib/index.js 3:9-22 

Code that requires googleapis in my React component:

 var gapi = require('googleapis'); 

Note. Any other code from the component can be provided upon request, but I do not think that it is related to this problem.

My package.json dependencies:

 "dependencies": { "aws-sdk": "^2.0.21", "chalk": "^0.5.0", "crypto-js": "^3.1.2-5", "cryptojs": "^2.5.3", "envify": "^1.2.1", "fluxxor": "1.5.1", "googleapis": "^2.0.2", "imports-loader": "^0.6.3", "jquery": "~2.1.1", "moment": "^2.8.3", "react": "0.11.1", "react-bootstrap": "0.12.0", "react-router": "0.5.2", "react-router-bootstrap": "0.5.0" }, "devDependencies": { "connect-livereload": "^0.4.0", "css-loader": "^0.7.0", "es6-promise": "^1.0.0", "esrever": "^0.1.0", "grunt": "^0.4.5", "grunt-contrib-copy": "^0.5.0", "grunt-contrib-less": "~0.11.4", "grunt-contrib-uglify": "^0.7.0", "grunt-contrib-watch": "^0.6.1", "grunt-git": "^0.2.14", "grunt-gitinfo": "^0.1.6", "grunt-karma": "^0.8.3", "grunt-lesslint": "^1.1.13", "grunt-rsync": "^0.6.1", "grunt-ssh": "^0.11.2", "grunt-webpack": "^1.0.8", "jssha": "^1.5.0", "jsx-loader": "^0.10.2", "karma": "^0.12.17", "karma-chrome-launcher": "^0.1.7", "karma-coverage": "^0.2.7", "karma-jasmine": "^0.1.5", "karma-js-coverage": "^0.4.0", "karma-osx-reporter": "^0.1.0", "karma-phantomjs-launcher": "^0.1.4", "karma-sourcemap-loader": "^0.3.2", "karma-webpack": "^1.2.1", "load-grunt-tasks": "^0.6.0", "style-loader": "^0.6.4", "time-grunt": "^1.0.0", "webpack": "^1.4.15" } 

npm version 2.5.1

node version v0.12.1

Thanks in advance for your help!

Answer 1

I do not have a working answer, but I am also looking for it. Are you dmk12 on github? If not, look at this problem:

https://github.com/google/google-api-nodejs-client/issues/403

It seems like part of the problem is that the library has a string

var Endpoint = require(endpointPath);

which needs to be evaluated since endpointPath is a variable. Unfortunately, the problem suggests that they probably won't change this behavior, as this makes their code more flexible. One person (maybe you?) Suggested circumventing this by loading the API via the <script> in index.html , but this will not work for us --- my team and I want to use the API from the server-side code.

The search for an answer continues.

Answer 2

As the comments of the project team explain , using a browser is not supported for the google-api-nodejs-client project. It is for server side use only.

To solve the wider problem of using the Google API with the React Webpack application, the Redux-based Gmail NuclearMail client provides an example.

At the NuclearMails entry point, index.html downloads the Webpack package, followed by loading the Google API with the handleGoogleClientLoad :

 <script src="app.js"></script> <script src="https://apis.google.com/js/client.js?onload=handleGoogleClientLoad"></script> 

This callback is defined in src/API.js :

 /* global gapi */ import ActionType from './ActionType'; import store from './store'; window.handleGoogleClientLoad = function() { tryAuthorize(true); }; function tryAuthorize(immediate) { store.dispatch({type: ActionType.Authorization.REQUEST}); gapi.auth.authorize( { /*eslint-disable camelcase*/ client_id: '108971935462-ied7vg89qivj0bsso4imp6imhvpuso5u.apps.googleusercontent.com', /*eslint-enable*/ scope: 'email https://www.googleapis.com/auth/gmail.modify', immediate }, whenAuthenticated ); } function whenAuthenticated(authResult) { if (authResult && !authResult.error) { store.dispatch({type: ActionType.Authorization.SUCCESS}); gapi.client.load('gmail', 'v1', whenLoaded); } else { store.dispatch({type: ActionType.Authorization.FAILURE}); } }