amplify-js: doesn't work with angular 8

Describe the bug develop your application run ng build and see the error below. It only fails when compiling. I migrated from angular 7 to 8.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information): Angular 8

Additional context Add any other context about the problem here.

:8080/vendor-es2015.js:180795 Uncaught ReferenceError: process is not defined
    at Object../node_modules/aws-sdk/lib/browser_loader.js (:8080/vendor-es2015.js:180795)
    at __webpack_require__ (:8080/runtime-es2015.js:79)
    at Object../node_modules/aws-sdk/browser.js (:8080/vendor-es2015.js:179691)
    at __webpack_require__ (:8080/runtime-es2015.js:79)
    at Object../node_modules/@aws-amplify/core/lib/Facet.js (:8080/vendor-es2015.js:160462)
    at __webpack_require__ (:8080/runtime-es2015.js:79)
    at Object../node_modules/@aws-amplify/core/lib/index.js (:8080/vendor-es2015.js:162463)
    at __webpack_require__ (:8080/runtime-es2015.js:79)
    at Object../node_modules/@aws-amplify/auth/lib/Auth.js (:8080/vendor-es2015.js:156332)
    at __webpack_require__ (:8080/runtime-es2015.js:79)

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 8
  • Comments: 28 (6 by maintainers)

Most upvoted comments

OK. 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",

Solved with adding following to polyfills.ts

// window.process needed by aws-amplify
(window as any).process = { browser: true };

as this is the same definition as aws browser loader tries to apply but fails because of undefined process. see aws-sdk/lib/browser_loader.js:L35

if (typeof process === 'undefined') {
  process = {
    browser: true
  };
}

The “uncaught ReferenceError: process is not defined” is similar to the “global” we got back when we upgraded to angular 6. If you recall we were instructed per Amplify angular doc to add the following into the polyfills.ts

(window as any).global = window;

As a test I also inserted the following

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

and it is fine now with target: es2015

My custom service_worker.js is still working… I have to research further.

"aws-amplify": "^1.1.28",
"aws-amplify-angular": "^3.0.3",

angular-cli 8.0.1 all other NPM are up-to-date except Typescript is 3.4.5 ( not 3.5.x)

This is garbage two times I have followed this to the T https://docs.amplify.aws/start/q/integration/angular and it doesnt work . Ive tried every single one of these suggestions too… This is Amazon this seems simple but apparently not, my errors:

node_modules/@aws-amplify/datastore/lib-esm/types.d.ts:73:38 - error TS2304: Cannot find name ‘Omit’.

73 function getJSType(scalar: keyof Omit<typeof GraphQLScalarType, ‘getJSType’>): ‘string’ | ‘number’ | ‘boolean’; ~~~~ node_modules/@aws-amplify/datastore/lib-esm/types.d.ts:83:69 - error TS2304: Cannot find name ‘Omit’.

83 export declare function isGraphQLScalarType(obj: any): obj is keyof Omit<typeof GraphQLScalarType, ‘getJSType’>; ~~~~ node_modules/@aws-amplify/datastore/lib-esm/types.d.ts:98:17 - error TS2304: Cannot find name ‘Omit’.

98 type: keyof Omit<typeof GraphQLScalarType, ‘getJSType’> | ModelFieldType | NonModelFieldType | EnumFieldType; ~~~~ node_modules/@aws-amplify/datastore/lib-esm/types.d.ts:115:36 - error TS2304: Cannot find name ‘Omit’.

115 export declare type ModelInit<T> = Omit<T, ‘id’>; ~~~~ node_modules/@aws-amplify/datastore/lib-esm/types.d.ts:119:39 - error TS2304: Cannot find name ‘Omit’.

119 export declare type MutableModel<T> = Omit<DeepWritable<T>, ‘id’>;

I dont understand this has been a lot of time wasted about ot just go back to spring security

I’m having this issue too, solved using process polyfill (thanks @gerrytsui ) but I’m not sure if this approach is the best.