Amplify-js: "process is not defined" FIX causes "Cannot read property 'Stream' of undefined"

[EmanH]

Describe the bug
Importing and adding my ApiService to a component constructor (angular) causes the following error:

Uncaught ReferenceError: process is not defined
    at Module../node_modules/graphql/module/jsutils/instanceOf.js (instanceOf.js:3)
    at __webpack_require__ (bootstrap:78)
    at Module../node_modules/graphql/module/type/definition.js (definition.js:1)
    at __webpack_require__ (bootstrap:78)
    at Module../node_modules/graphql/module/type/validate.js (validate.js:1)
    at __webpack_require__ (bootstrap:78)
    at Module../node_modules/graphql/module/graphql.js (graphql.js:1)
    at __webpack_require__ (bootstrap:78)
    at Module../node_modules/graphql/module/index.js (vendor.js:188197)
    at __webpack_require__ (bootstrap:78)

I can fix this by adding the following to polyfills:

(window as any).process = {
  env: { DEBUG: undefined },
};

However, doing so causes the following error when authenticating:

Cannot read property 'Stream' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'Stream' of undefined
    at Object.computeSha256 (util.js:705)
    at Request.COMPUTE_SHA256 (event_listeners.js:142)
    at Request.callListeners (sequential_executor.js:105)
    at Request.emit (sequential_executor.js:81)
    at Request.emit (request.js:683)
    at Request.transition (request.js:22)
    at AcceptorStateMachine.runTo (state_machine.js:14)
    at state_machine.js:26
    at Request.<anonymous> (request.js:38)
    at Request.<anonymous> (request.js:685) TypeError: Cannot read property 'Stream' of undefined
    at Object.computeSha256 (http://localhost:4200/vendor.js:175140:32)
    at Request.COMPUTE_SHA256 (http://localhost:4200/vendor.js:166545:18)
    at Request.callListeners (http://localhost:4200/vendor.js:171389:18)
    at Request.emit (http://localhost:4200/vendor.js:171365:10)
    at Request.emit (http://localhost:4200/vendor.js:169999:14)
    at Request.transition (http://localhost:4200/vendor.js:169338:10)
    at AcceptorStateMachine.runTo (http://localhost:4200/vendor.js:174393:12)
    at http://localhost:4200/vendor.js:174405:10
    at Request.<anonymous> (http://localhost:4200/vendor.js:169354:9)
    at Request.<anonymous> (http://localhost:4200/vendor.js:170001:12)

I've narrowed it down to that. I can get rid of one error, by adding the polyfill, and get rid of the other error by removing the polyfill.

I've got no idea why the .process polyfill would be causing Cannot read property 'Stream' of undefined. Doesn't make any sense to me.

This is breaking my application though, and I can't get around it.

There seems to be so many bugs with amplify. Sigh... it was a nice dream.

[EmanH]

The first error Uncaught ReferenceError: process is not defined, was occurring only when importing the ApiService in one particular component.

It was strange because even when I copied the exact same component ts code from another component, the error persisted. I deleted the component, re-created a new one and the error so far hasn't come back.

[EmanH]

The error process is not defined just came back after moving and renaming an angular component. :(

[EmanH]

I need to get this solved ASAP to move forward with app development, is anyone able to help?

[EmanH]

Again, I was able to delete the component, and re-create a new component. Copy and paste the same code, and the error didn't occur. I'm not sure what causes it, but re-creating the component is (an inconvenient) work-around for now.

Then a couple of hours later, creating a brand new component, import the APIService and it's back. :(

[EmanH]

https://github.com/graphql/graphql-js/issues/1536

[EmanH]

https://github.com/graphql/graphql-js/issues/1344

[haverchuck]

@EmanH - Are you using the aws-amplify-angular package and it's AmplifyService, or are you just using Amplify.JS alone with your own APIService?

[EmanH]

@haverchuck I believe I'm using Amplify.JS alone.

[oliverandersencox]

Yeah this error just happened for me. I added the Amplify generated Angular API service to another service and I get exactly the same error

[gerrytsui]

Duplicate of #3193

I found a way to properly Polyfill the "process is not defined"

npm install -S process

the add the following to your polyfills.ts

import * as process from 'process';
window['process'] = process;

and set tsconfig.json

"target": "es2015",

[oliverandersencox]

@gerrytsui you sir... are a legend! fixed on my end now