Build issues related to polyfill and webpack 5

[evazorro]

Hi there! I have a small React app I made with create-react-app, and I'm trying to add your library to it so I can push data from a form to a Google spreadsheet. The problem is that as soon as I do import { GoogleSpreadsheet } from 'google-spreadsheet';, the build produces all these errors about polyfill and webpack 5 (see below). I've done quite a bit of searching online, and tried the following to resolve it:

• Adding the NodePolyfillPlugin
• Downgrading to webpack 4
• Adding a webpack config file with all these fallbacks:

  resolve: {
      fallback: {
        assert: false,
        buffer: false,
        console: false,
        constants: false,
        crypto: false,
        domain: false,
        events: false,
        http: false,
        https: false,
        os: false,
        path: false,
        punycode: false,
        process: false,
        querystring: false,
        stream: false,
        string_decoder: false,
        sys: false,
        timers: false,
        tty: false,
        url: false,
        util: false,
        vm: false,
        zlib: false,
      },
    },
  

• Setting target: 'node' in webpack config

No luck so far. Is there a chance that there's something that needs to be done on your end? I'm stumped at this point, but I'd really like to use your library as it looks like the best option for working with the Google Sheets API! Thank you in advance for any advice!

Errors

Compiled with problems:

ERROR in ./node_modules/buffer-equal-constant-time/index.js 4:13-37

Module not found: Error: Can't resolve 'buffer' in '/<path>/<to>/node_modules/buffer-equal-constant-time'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
	- install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "buffer": false }


ERROR in ./node_modules/gcp-metadata/node_modules/gaxios/build/src/gaxios.js 27:16-32

Module not found: Error: Can't resolve 'https' in '/<path>/<to>/node_modules/gcp-metadata/node_modules/gaxios/build/src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }'
	- install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "https": false }


ERROR in ./node_modules/google-auth-library/build/src/auth/googleauth.js 20:24-48

Module not found: Error: Can't resolve 'child_process' in '/<path>/<to>/node_modules/google-auth-library/build/src/auth'


ERROR in ./node_modules/google-auth-library/build/src/auth/googleauth.js 22:11-24

Module not found: Error: Can't resolve 'fs' in '/<path>/<to>/node_modules/google-auth-library/build/src/auth'


ERROR in ./node_modules/google-auth-library/build/src/auth/googleauth.js 26:11-24

Module not found: Error: Can't resolve 'os' in '/<path>/<to>/node_modules/google-auth-library/build/src/auth'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
	- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "os": false }


ERROR in ./node_modules/google-auth-library/build/src/auth/googleauth.js 28:13-28

Module not found: Error: Can't resolve 'path' in '/<path>/<to>/node_modules/google-auth-library/build/src/auth'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
	- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "path": false }


ERROR in ./node_modules/google-auth-library/build/src/auth/oauth2client.js 22:15-32

Module not found: Error: Can't resolve 'stream' in '/<path>/<to>/node_modules/google-auth-library/build/src/auth'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
	- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "stream": false }


ERROR in ./node_modules/google-auth-library/build/src/crypto/node/crypto.js 20:15-32

Module not found: Error: Can't resolve 'crypto' in '/<path>/<to>/node_modules/google-auth-library/build/src/crypto/node'
Did you mean './crypto'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules, /<path>/<to>/node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
	- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "crypto": false }


ERROR in ./node_modules/google-auth-library/node_modules/gaxios/build/src/gaxios.js 27:16-32

Module not found: Error: Can't resolve 'https' in '/<path>/<to>/node_modules/google-auth-library/node_modules/gaxios/build/src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }'
	- install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "https": false }


ERROR in ./node_modules/google-p12-pem/build/src/index.js 14:11-24

Module not found: Error: Can't resolve 'fs' in '/<path>/<to>/node_modules/google-p12-pem/build/src'


ERROR in ./node_modules/google-p12-pem/build/src/index.js 18:15-30

Module not found: Error: Can't resolve 'util' in '/<path>/<to>/node_modules/google-p12-pem/build/src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
	- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "util": false }


ERROR in ./node_modules/gtoken/build/src/index.js 14:11-24

Module not found: Error: Can't resolve 'fs' in '/<path>/<to>/node_modules/gtoken/build/src'


ERROR in ./node_modules/gtoken/build/src/index.js 20:13-28

Module not found: Error: Can't resolve 'path' in '/<path>/<to>/node_modules/gtoken/build/src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
	- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "path": false }


ERROR in ./node_modules/gtoken/build/src/index.js 22:15-30

Module not found: Error: Can't resolve 'util' in '/<path>/<to>/node_modules/gtoken/build/src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
	- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "util": false }


ERROR in ./node_modules/gtoken/node_modules/gaxios/build/src/gaxios.js 27:16-32

Module not found: Error: Can't resolve 'https' in '/<path>/<to>/node_modules/gtoken/node_modules/gaxios/build/src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }'
	- install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "https": false }


ERROR in ./node_modules/https-proxy-agent/dist/agent.js 45:30-44

Module not found: Error: Can't resolve 'net' in '/<path>/<to>/node_modules/https-proxy-agent/dist'


ERROR in ./node_modules/https-proxy-agent/dist/agent.js 47:30-44

Module not found: Error: Can't resolve 'tls' in '/<path>/<to>/node_modules/https-proxy-agent/dist'


ERROR in ./node_modules/https-proxy-agent/dist/agent.js 51:33-50

Module not found: Error: Can't resolve 'assert' in '/<path>/<to>/node_modules/https-proxy-agent/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
	- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "assert": false }


ERROR in ./node_modules/jwa/index.js 5:13-30

Module not found: Error: Can't resolve 'crypto' in '/<path>/<to>/node_modules/jwa'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
	- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "crypto": false }


ERROR in ./node_modules/jwa/index.js 9:11-26

Module not found: Error: Can't resolve 'util' in '/<path>/<to>/node_modules/jwa'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
	- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "util": false }


ERROR in ./node_modules/jws/lib/data-stream.js 4:13-30

Module not found: Error: Can't resolve 'stream' in '/<path>/<to>/node_modules/jws/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
	- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "stream": false }


ERROR in ./node_modules/jws/lib/data-stream.js 6:11-26

Module not found: Error: Can't resolve 'util' in '/<path>/<to>/node_modules/jws/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
	- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "util": false }


ERROR in ./node_modules/jws/lib/sign-stream.js 8:13-30

Module not found: Error: Can't resolve 'stream' in '/<path>/<to>/node_modules/jws/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
	- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "stream": false }


ERROR in ./node_modules/jws/lib/sign-stream.js 12:11-26

Module not found: Error: Can't resolve 'util' in '/<path>/<to>/node_modules/jws/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
	- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "util": false }


ERROR in ./node_modules/jws/lib/tostring.js 2:13-37

Module not found: Error: Can't resolve 'buffer' in '/<path>/<to>/node_modules/jws/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
	- install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "buffer": false }


ERROR in ./node_modules/jws/lib/verify-stream.js 8:13-30

Module not found: Error: Can't resolve 'stream' in '/<path>/<to>/node_modules/jws/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
	- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "stream": false }


ERROR in ./node_modules/jws/lib/verify-stream.js 12:11-26

Module not found: Error: Can't resolve 'util' in '/<path>/<to>/node_modules/jws/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
	- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "util": false }


ERROR in ./node_modules/safe-buffer/index.js 2:13-30

Module not found: Error: Can't resolve 'buffer' in '/<path>/<to>/node_modules/safe-buffer'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
	- install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "buffer": false }

[ercangursoy]

same issue here

[sebastianlaclau]

same here

[theoephraim]

I know others have successfully used this module in front-end only projects, but I really never built it with that in mind, as most use cases use service account auth, which you would not ever want to have available in the front-end.

It's on my to-do list to split out the node dependencies and use rollup to build a front-end friendly version, but just have not gotten to it yet.

[Productivix]

hi, same or similar ,in a RN project : Error: Unable to resolve module util from /myprojectl/node_modules/jws/lib/sign-stream.js: util could not be found within the project or in these directories: node_modules/jws/node_modules node_modules 5 | var Stream = require('stream'); 6 | var toString = require('./tostring');

7 | var util = require('util'); | ^ 8 | 9 | function base64url(string, encoding) { 10 | return Buffer at ModuleResolver.resolveDependency

[Randehh]

I have the same issue. There doesn't seem to be a great alternative, I'd love if this can be supported or a workaround provided!

[lukasz-zaroda]

It's already perfectly usable in browser with Webpack 5.

You just need node-polyfill-webpack-plugin and additionally in your webpack's configuration:

  resolve: {
    fallback: {
      fs: false,
      net: false,
      tls: false,
      'child_process': false,
    },
  },

And it should work just fine. At least, it works for my use case of simply reading a spreadsheet.

[JakubAndrysek]

My full solution for resolving this problem is there.

[armenic]

Dear developer, please fix this issue. No way to use the amazing google-spreadsheet in React 18 :(

[theoephraim]

@armenic - I've finally begun working on a new major release that will move everything to typescript (so we'll get better types that stay up to date!) and will make sure it is usable in the browser. How long it will take depends on my free time, but hopefully soon!

[armenic]

Thanks so much Theo. For now I reverted back to v 4 react-script as suggested in https://stackoverflow.com/a/73179645/6112118. Impatiently waiting for your new release 🚀

[theoephraim]

Hi all!

version 4.0.0 is now deployed. I think this should make it easier to use int he browser, as google-auth-library is now an optional peer dependency. That said, I dont have a react project that uses this library, so please give it a whirl, and if there are still problems I'll help fix them. I'd love to add some info to the readme too to help others as well, so please let me know what was needed to get it working if it's not obvious.

Cheers