ReferenceError: process is not defined

[Jack-Works]

ReferenceError: process is not defined
  at Readable.pipe (_stream_readable.js:581:1)
  at pipe (index.js:56:1)
  at Array.reduce (<anonymous>)
  at Object.pump [as default] (index.js:79:1)
  at new BaseProvider (BaseProvider.js:49:1)
  at new MetaMaskInpageProvider (MetaMaskInpageProvider.js:24:1)
  at createMetaMaskProvider (index.js:13:1)

[legobeat]

@Jack-Works Which version is this? Are you getting this error also on the latest master?

[Jack-Works]

Yes. This package relies on extension-port-stream and it relies on readable-stream. Three accesses to process (process.stdin, process.stdout and process.nextTick) happen in readable-stream. Is it possible to get rid of those dependencies?

[legobeat]

Hmm, are you using any bundler? Currently, both readable-stream and metamask-extension-provider expect something like browserify or webpack to be used and polyfillys to be provided by the user.

process should get pulled inreadable-stream as transitive dependency already:

https://github.com/MetaMask/extension-provider/blob/692d2b3c1b82a6116a3581a4fc6d1619c82bff43/package-lock.json#L1303

A quick fix I have not tried could be something like global.process = require('process') in your code, though that's not something we want to do in this package, I think.

Is it possible to get rid of those dependencies?

Probably, though it's not clear to me what the best way to achieve that is considering it comes from inside readable-stream.

[Jack-Works]

webpack 5 (released in 2020) no longer provides polyfill for process (see https://webpack.js.org/migrate/5/#run-a-single-build-and-follow-advice)

I currently replaces process.stdin (and stdout) to null, and process.nextTick to a polyfill, but I want to avoid this, since this package is only used in browser, so there is no meaning to use a Node.js global.

[c1im4cu5]

I came upon the issue yesterday. Compiling webpack was successful. Upon utilzation of my extension, the above error began to appear.

The issue is occuring because process isn't native to the browser. My work-around to the problem was to perform the following steps:

Import and save process to environment: npm install process --save

Modify your webpack configuration to include the 'process' polyfill: plugins: [ new webpack.ProvidePlugin({ process: 'process/browser', }), ], resolve: { fallback: { "process": require.resolve("process/browser"), }, },

Import to designated file (this can be done be following the error to the source file; which is likely in the node_modules directory): import process from 'process';

I hope this helps!