Validate it works with react-native

[airstep]

Please add child_process module to package.json

[airstep]

Or better remove all deps in code

[ofrobots]

@airstep child_process is a Node.js built-in module. It should not be added to package.json as it doesn't need to be fetched from npm.

Can you elaborate on what you mean by Or better remove all deps in code?

[airstep]

I just trying to use google-cloud/storage in ionic project wich depends on google-auth-librarary and get error: Cannot find module "child_process"

[JustinBeckwith]

Can you please share some sample code, and the full callstack?

[ofrobots]

I am going to close this issue. Feel free to re-open the issue if this is still a question, and once the necessary information is available.

[mmdevcodes]

I've encountered an issue with child_process as well. Using a fresh build of create-react-app:

Failed to compile

Failed to compile

./~/google-auth-library/lib/auth/googleauth.js
Module not found: Can't resolve 'child_process' in 'D:\Projects\LeagueDecay\node_modules\google-auth-library\lib\auth'

Stack:

04:20:27.944 ./~/google-auth-library/lib/auth/googleauth.js
Module not found: Can't resolve 'child_process' in 'D:\Projects\TestProject\node_modules\google-auth-library\lib\auth' 1 bundle.js:30424:16
    __stack_frame_overlay_proxy_console__ http://localhost:3000/static/js/bundle.js:30424:16
    handleErrors http://localhost:3000/static/js/bundle.js:12206:7
    ./node_modules/react-dev-utils/webpackHotDevClient.js/connection.onmessage http://localhost:3000/static/js/bundle.js:12239:7
    ./node_modules/sockjs-client/lib/event/eventtarget.js/EventTarget.prototype.dispatchEvent http://localhost:3000/static/js/bundle.js:36232:5
    ./node_modules/sockjs-client/lib/main.js/</SockJS.prototype._transportMessage/< http://localhost:3000/static/js/bundle.js:37030:11
    ./node_modules/sockjs-client/lib/main.js/</SockJS.prototype._transportMessage http://localhost:3000/static/js/bundle.js:37028:9
    ./node_modules/sockjs-client/lib/event/emitter.js/EventEmitter.prototype.emit http://localhost:3000/static/js/bundle.js:36126:5
    WebSocketTransport/this.ws.onmessage http://localhost:3000/static/js/bundle.js:39326:5

[kevingzhang]

Please reopen this issue, I got the same problem. Failed to compile.

./~/google-auth-library/lib/auth/googleauth.js Module not found: Can't resolve 'child_process' in '/Users/kevinzhang/github/formAddOn/google_form_addon/developer/react-app/node_modules/google-auth-library/lib/auth'

[kjin]

@MauriceMahan @kevingzhang Correct me if I'm wrong, but it looks like you're running or transpiling code that is meant to run on the client-side. child_process (and other built-in node modules) won't be available in this scenario, and I don't think this library would work in the browser as a result.

This document might point you in the right direction.

[kevingzhang]

Thank @kjin shortly after I post my message, I realized that you mis used my existing code which was originally running on server end but now from front end. You are right, it is my mistake. In this case, I cannot reuse my existing backend code, need to write some new code. Thank you very much. Your answer is right.

[lokeshbansal1993]

This dependency was not found:

• child_process in ./node_modules/google-auth-library/build/src/auth/googleauth.js

To install it, you can run: npm install --save child_process

Listening at http://localhost:8080

how to resolve this error

[lightray1]

I have the same problem.

When I try to import firebase-auth I get:

ERROR  Failed to compile with 38 errors                             

These dependencies were not found:

* child_process in ./node_modules/google-auth-library/build/src/auth/googleauth.
js, ./node_modules/grpc/node_modules/detect-libc/lib/detect-libc.js
* fs in ./node_modules/@google-cloud/storage/src/file.js, ./node_modules/@google
-cloud/storage/src/bucket.js and 34 others

To install them, you can run: npm install --save child_process fs

Of course I've tried to install those deps, but with no results.

[afuggini]

I was experiencing this issue when trying to load server-only stuff into client side. Solved now.

[wuyxp]

Adding

node: { child_process: 'empty' } to webpack config file and the error is gone. Not sure how it works, It seems like webpack did some thing with child_process module in web target.

[brothatru]

Using this library with server-less next.js, I was able to get my code to build by adding the following to my webpack config in next.config.js:

node: {
        // Some libraries import Node modules but don't use them in the browser.
        // Tell Webpack to provide empty mocks for them so importing them works.
        ...config.node,
        fs: 'empty',
        child_process : 'empty',
        net : 'empty',
        tls: 'empty',
      }

[perry-mitchell]

child_process could easily be wrapped in a require() call in the function it's used, to prevent automatic failure in environments like react-native. I have to fork this to get it to work there.

Seems the webpack build doesn't properly empty child_process and it's still being required in the built assets.

[perry-mitchell]

For anyone else trying to use this library on react-native, I've forked it. I've re-written just the OAuth2 portion of this library (and with minimal functionality reproduction) here.

[JustinBeckwith]

Heh woah! What specific change do you need to make here? Instead of a fork, a patch would be looooovely :)

[perry-mitchell]

Well to be honest I’m still trying to get it to work. The child_process issue was just one problem and it seems as though there are more issues the further I dig.

I’m not super familiar with typescript and inlining the child_process call raises a number of type errors so I’m not sure if that’s the best way to go about it. It’d be great to get webpack to actually stub the module - maybe I’ll try this tomorrow 🧐

If I find a simple solution I’ll make a PR 👍

[JustinBeckwith]

Out of curiosity - can you share what y'all are exactly trying to do? Most of the flows in this library make sense on the back end, but not a ton of them make sense on the front end. Just to make sure we're trying and testing the right stuff - tell me about what you're trying to do!

[JustinBeckwith]

Ok - so I actually went and tried all this stuff myself :) Turns out ... with google-auth-library@4.2.5, this seems to "work on my machine". With no changes, I was able to create an OAuth2Client, generate an auth url, redirect back, set the tokens, and get an authorization header. Our webpack.config.js we ship (which I have no idea how or if this works out of the box with react) already excludes child_process, because you wouldn't be able to use any of that stuff in the browser anyway.

For any folks who are struggling here - can you please make to sure: a.) use the latest blazin hot version of google-auth-library b.) share the exact error you're getting c.) share the exact code where you're blowin up

[perry-mitchell]

what y'all are exactly trying to do

Fair question! And I feel the answer will most likely be that we're doing it wrong, haha. We're building an application that has desktop, mobile and browser (extension) based clients, and these need access to the user's Google Drive storage. We've chosen to go with the browser-based OAuth flow as it's easiest to get running on all the platforms, and Google's OAuth configuration doesn't really allow for easy setup of apps that run across all platforms (iOS/Android and Mac/Windows/Linux apps). That aside, we needed to generate auth URLs and then exchange auth codes for tokens, handling refresh etc. - We originally landed on using googleapis from npm, but this had too much extra functionality to really compile well (using webpack etc.). And so we ended up using this library as it has all the functionality we need to perform OAuth authentication. In the end we get the tokens we need and we can easily port our authentication code from platform to platform. We're using react/react-native across the stack.

With no changes, I was able to create an OAuth2Client, generate an auth url, redirect back, set the tokens, and get an authorization header.

So this doesn't work in react-native - what I mentioned in my original comment. Of course probably not a usual environment for this library to run in (made apparent by the calls to child_process), but it'd be necessary for us to have it work here.

This circles back to how I've seen that the publish'd (latest) build of this library actually doesn't stub child_process - the compiled source still requires child_process and thusly fails in environments that don't support it.

I can see that the webpack config seems to stub it, but is this not published? I don't see the webpack dist file in the npm payload.

Thanks for the help!!

[perry-mitchell]

@JustinBeckwith I'm trying to use the included OAuth2Client to generate an auth URL and convert codes/tokens.. Is there some better way to do this in react-native? I'm still unable to get a compiled version of this library working in react-native, regardless of me publishing the webpack'd bundle on my fork.

[perry-mitchell]

Thanks @JustinBeckwith! Much appreciated. We're attempting to make it work over at https://github.com/buttercup/buttercup-mobile, and will happily test any changes there. I'll push a branch soon and will update with that.

[wallisonfelipe]

1) Go to your folder project

2) in "node_modules", find the package "child_process" and delete it

3) in "node_modules", find the package "google-auth-library" and go to "build > src > auth > googleauth.js"

4) in the arquive, find the code: const child_process_1 = require("child_process"); and replace by: const { exec }= require("child_process");

5) find the code: child_process_1.exec('gcloud config config-helper --format json', (err, stdout, stderr) and replace by: exec('gcloud config config-helper --format json', (err, stdout, stderr)

Next, restart the metro bundler.

Works for me.

[brendan1212]

I was experiencing this issue when trying to load server-only stuff into client side. Solved now.

@afuggini Thanks for this! Using Nuxt and wrapped my function in a simple

if (!process.client) { 
    ... 
}

Not sure if others having this issue can relate to this, but if you're using a universal-mode static site generator then this could be a simple fix. Simply learn how to run code server-side-only with your framework. : )

[perry-mitchell]

In my opinion this should be usable client-side, as clients need to follow OAuth2 flow as well.. The OAuth2Client module was of particular interest to me as I needed it to generate URLs and exchange tokens. I'm using my own fork of this module now successfully in the browser, but would consider moving back if this issue was fixed.

[ydax]

I was experiencing this issue when trying to load server-only stuff into client side. Solved now.

Yep. This happened to me when I tried to bring in a Firebase node library (functions) into a client-side file using a Next.js build. When I removed those references, this problem stopped happening.

[mackeroo]

I was getting the exact same error for certain pages, using nextjs: ModuleNotFoundError: Module not found: Error: Can't resolve 'child_process' in '/path/node_modules/google-auth-library/build/src/auth'

I tried the solutions above, but wasn't successful. What I found that worked for me was that one of our nested components was being imported incorrectly.

when I auto-imported the component, it added this line:

import MyComponent from ".";

I was able to get my code working when I fixed the import as follows:

import MyComponent from "./index";

[bcoe]

closing in favor of https://github.com/googleapis/google-cloud-node/issues/2933, which outlines how to get a variety of our libraries working with WebPack.

tldr; If you're using google-auth-library-nodejs, or one of our libraries that uses it, it takes a little bit of fiddling to replace server side dependencies, but it should be achievable.

[eadortsu]

Using this library with server-less next.js, I was able to get my code to build by adding the following to my webpack config in next.config.js:

node: {
        // Some libraries import Node modules but don't use them in the browser.
        // Tell Webpack to provide empty mocks for them so importing them works.
        ...config.node,
        fs: 'empty',
        child_process : 'empty',
        net : 'empty',
        tls: 'empty',
      }

Can you help me out, facing same issue with nuxt, and can't get it working. @brothatru

[rikinshah23]

Using this library with server-less next.js, I was able to get my code to build by adding the following to my webpack config in next.config.js:

node: {
        // Some libraries import Node modules but don't use them in the browser.
        // Tell Webpack to provide empty mocks for them so importing them works.
        ...config.node,
        fs: 'empty',
        child_process : 'empty',
        net : 'empty',
        tls: 'empty',
      }

I am getting the same error but this didn't fix it for my next.js applicaion.

./node_modules/google-auth-library/build/src/auth/googleauth.js:17:0
Module not found: Can't resolve 'child_process'
null

Could anyone please help in setting up my next.js app for server less build? Thanks

[reuel88]

I was able to solve it like this in my next.config.js file

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback.fs = false;
      config.resolve.fallback.child_process = false;
      config.resolve.fallback.net = false;
      config.resolve.fallback.tls = false;
    }
    return config;
  },
}

[JamesGs1994]

Where to add this child_process : 'empty', in React native App..?

{ "name": "freshotvendorapp", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "start": "react-native start", "test": "jest", "lint": "eslint .", "postinstall": "node_modules/.bin/rn-nodeify --install crypto,fs,https --hack" }, "dependencies": { "@google-cloud/logging": "^10.3.3", "@notifee/react-native": "^5.4.0", "@react-native-async-storage/async-storage": "^1.17.7", "@react-native-clipboard/clipboard": "^1.11.1", "@react-native-community/checkbox": "^0.5.12", "@react-native-community/masked-view": "^0.1.11", "@react-native-firebase/analytics": "^16.4.3", "@react-native-firebase/app": "^15.2.0", "@react-native-firebase/auth": "^15.2.0", "@react-native-firebase/database": "^15.2.0", "@react-native-firebase/firestore": "^15.2.0", "@react-native-firebase/functions": "^16.5.0", "@react-native-firebase/messaging": "^15.2.0", "@react-native-picker/picker": "^2.4.2", "@react-navigation/bottom-tabs": "^6.3.1", "@react-navigation/material-bottom-tabs": "^6.2.1", "@react-navigation/material-top-tabs": "^6.2.1", "@react-navigation/native": "^6.0.10", "@react-navigation/stack": "^6.2.1", "asyncstorage-down": "^4.2.0", "axios": "^1.2.1", "babel-plugin-rewrite-require": "^1.14.5", "firebase": "^9.15.0", "firebase-functions": "^4.1.1", "firebase-tools": "^11.19.0", "geofirestore": "^5.2.0", "https-browserify": "~0.0.0", "lodash": "^4.17.21", "metro-resolver": "^0.73.6", "moment": "^2.29.3", "native-base": "^3.4.7", "node-libs-react-native": "^1.2.1", "react": "17.0.2", "react-native": "0.68.5", "react-native-animated-spinkit": "^1.5.2", "react-native-audio-recorder-player": "^3.5.1", "react-native-config": "^1.4.6", "react-native-device-info": "^10.2.0", "react-native-dotenv": "^3.4.6", "react-native-dropdown-picker": "^5.4.2", "react-native-elements": "^3.4.2", "react-native-fs": "^2.20.0", "react-native-geolocation-service": "^5.3.1", "react-native-gesture-handler": "^2.4.2", "react-native-image-picker": "^4.8.4", "react-native-level-fs": "^3.0.0", "react-native-linear-gradient": "^2.5.6", "react-native-logs": "^5.0.1", "react-native-maps": "^0.31.1", "react-native-material-dropdown-v2": "^0.11.1", "react-native-material-dropdown-v2-fixed": "^0.11.3", "react-native-modal": "^13.0.1", "react-native-pager-view": "^5.4.24", "react-native-paper": "^4.12.1", "react-native-paper-dropdown": "^1.0.7", "react-native-picker-select": "^8.0.4", "react-native-qrcode-svg": "^6.1.2", "react-native-randombytes": "^3.0.0", "react-native-safe-area-context": "^4.3.1", "react-native-screens": "^3.13.1", "react-native-shadow-2": "^6.0.5", "react-native-snackbar": "^2.4.0", "react-native-svg": "^12.3.0", "react-native-tab-view": "^3.1.1", "react-native-vector-icons": "^9.1.0", "react-native-webview": "^11.22.2", "react-native-whc-loading": "^1.0.3", "react-redux": "^8.0.2", "reduce-reducers": "^1.0.4", "redux": "^4.2.0", "redux-logger": "^3.0.6", "redux-persist": "^6.0.0", "redux-saga": "^1.1.3", "redux-saga-firebase": "^0.15.0", "redux-thunk": "^2.4.1", "rn-nodeify": "^10.3.0", "stream": "^0.0.2", "util": "^0.12.5" }, "devDependencies": { "@babel/core": "^7.12.9", "@babel/runtime": "^7.12.5", "@react-native-community/eslint-config": "^2.0.0", "babel-jest": "^26.6.3", "eslint": "^7.32.0", "jest": "^26.6.3", "metro-react-native-babel-preset": "^0.67.0", "react-test-renderer": "17.0.2", "rn-nodeify": "^10.3.0" }, "jest": { "preset": "react-native" }, "react-native": { "crypto": "react-native-crypto", "https": "https-browserify", "fs": "react-native-level-fs" }, "browser": { "crypto": "react-native-crypto", "https": "https-browserify", "fs": "react-native-level-fs", "child_process": false }, "config": { "crypto": "react-native-crypto", "https": "https-browserify", "fs": "react-native-level-fs", "child_process": false } }

Iam not able to resolve this issues because of using @google cloud/logging

[tusharmittal20]

Where to add this child_process : 'empty', in React native App..?

{ "name": "freshotvendorapp", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "start": "react-native start", "test": "jest", "lint": "eslint .", "postinstall": "node_modules/.bin/rn-nodeify --install crypto,fs,https --hack" }, "dependencies": { "@google-cloud/logging": "^10.3.3", "@notifee/react-native": "^5.4.0", "@react-native-async-storage/async-storage": "^1.17.7", "@react-native-clipboard/clipboard": "^1.11.1", "@react-native-community/checkbox": "^0.5.12", "@react-native-community/masked-view": "^0.1.11", "@react-native-firebase/analytics": "^16.4.3", "@react-native-firebase/app": "^15.2.0", "@react-native-firebase/auth": "^15.2.0", "@react-native-firebase/database": "^15.2.0", "@react-native-firebase/firestore": "^15.2.0", "@react-native-firebase/functions": "^16.5.0", "@react-native-firebase/messaging": "^15.2.0", "@react-native-picker/picker": "^2.4.2", "@react-navigation/bottom-tabs": "^6.3.1", "@react-navigation/material-bottom-tabs": "^6.2.1", "@react-navigation/material-top-tabs": "^6.2.1", "@react-navigation/native": "^6.0.10", "@react-navigation/stack": "^6.2.1", "asyncstorage-down": "^4.2.0", "axios": "^1.2.1", "babel-plugin-rewrite-require": "^1.14.5", "firebase": "^9.15.0", "firebase-functions": "^4.1.1", "firebase-tools": "^11.19.0", "geofirestore": "^5.2.0", "https-browserify": "~0.0.0", "lodash": "^4.17.21", "metro-resolver": "^0.73.6", "moment": "^2.29.3", "native-base": "^3.4.7", "node-libs-react-native": "^1.2.1", "react": "17.0.2", "react-native": "0.68.5", "react-native-animated-spinkit": "^1.5.2", "react-native-audio-recorder-player": "^3.5.1", "react-native-config": "^1.4.6", "react-native-device-info": "^10.2.0", "react-native-dotenv": "^3.4.6", "react-native-dropdown-picker": "^5.4.2", "react-native-elements": "^3.4.2", "react-native-fs": "^2.20.0", "react-native-geolocation-service": "^5.3.1", "react-native-gesture-handler": "^2.4.2", "react-native-image-picker": "^4.8.4", "react-native-level-fs": "^3.0.0", "react-native-linear-gradient": "^2.5.6", "react-native-logs": "^5.0.1", "react-native-maps": "^0.31.1", "react-native-material-dropdown-v2": "^0.11.1", "react-native-material-dropdown-v2-fixed": "^0.11.3", "react-native-modal": "^13.0.1", "react-native-pager-view": "^5.4.24", "react-native-paper": "^4.12.1", "react-native-paper-dropdown": "^1.0.7", "react-native-picker-select": "^8.0.4", "react-native-qrcode-svg": "^6.1.2", "react-native-randombytes": "^3.0.0", "react-native-safe-area-context": "^4.3.1", "react-native-screens": "^3.13.1", "react-native-shadow-2": "^6.0.5", "react-native-snackbar": "^2.4.0", "react-native-svg": "^12.3.0", "react-native-tab-view": "^3.1.1", "react-native-vector-icons": "^9.1.0", "react-native-webview": "^11.22.2", "react-native-whc-loading": "^1.0.3", "react-redux": "^8.0.2", "reduce-reducers": "^1.0.4", "redux": "^4.2.0", "redux-logger": "^3.0.6", "redux-persist": "^6.0.0", "redux-saga": "^1.1.3", "redux-saga-firebase": "^0.15.0", "redux-thunk": "^2.4.1", "rn-nodeify": "^10.3.0", "stream": "^0.0.2", "util": "^0.12.5" }, "devDependencies": { "@babel/core": "^7.12.9", "@babel/runtime": "^7.12.5", "@react-native-community/eslint-config": "^2.0.0", "babel-jest": "^26.6.3", "eslint": "^7.32.0", "jest": "^26.6.3", "metro-react-native-babel-preset": "^0.67.0", "react-test-renderer": "17.0.2", "rn-nodeify": "^10.3.0" }, "jest": { "preset": "react-native" }, "react-native": { "crypto": "react-native-crypto", "https": "https-browserify", "fs": "react-native-level-fs" }, "browser": { "crypto": "react-native-crypto", "https": "https-browserify", "fs": "react-native-level-fs", "child_process": false }, "config": { "crypto": "react-native-crypto", "https": "https-browserify", "fs": "react-native-level-fs", "child_process": false } }

Iam not able to resolve this issues because of using @google cloud/logging

did you find any solution to this