Aws-sdk-js: Error uploading object in S3 after upgrading to Angular 6 / Node 8.11.3

[carlara75]

Hi
I just updated my project from Angular 5.2.0 / Node 6.14.3 to Angular 6.0.3 / Node 8.11.3 yesterday and I am getting the following error:

Cannot read property 'Stream' of undefined
    at ParamValidator.validatePayload (param_validator.js:243)
    at ParamValidator.validateScalar (param_validator.js:133)
    at ParamValidator.validateMember (param_validator.js:94)
    at ParamValidator.validateStructure (param_validator.js:75)
    at ParamValidator.validateMember (param_validator.js:88)
    at ParamValidator.validate (param_validator.js:34)
    at Request.VALIDATE_PARAMETERS (event_listeners.js:125)
    at Request.callListeners (sequential_executor.js:105)
    at callNextListener (sequential_executor.js:95)
    at event_listeners.js:85

After some research I found the issue is occurring at inside /node_module/aws-sdk/lib/utils.js

I just edited, for testing purpose only, line 40 to

isNode: function isNode() { return false },

instead

isNode: function isNode() { return !util.isBrowser(); },

and I have my application running again.

Just to let you know, I an not doing anything special and my code look like this:

  uploadFile(folder: string, file: File): Observable<FileUploadStatus> {

    return new Observable<FileUploadStatus>((observer) => {

      const fileData = {
        Bucket: environment.s3Bucket,
        Key: `${folder}/${file.name}`,
        ContentType: file.type,
        Body: file
      };

      const s3 = new S3(environment.s3Params);
      s3.upload(fileData, function (err, data) {
        if (err) {
          observer.next(new FileUploadStatus(file.name, 0, `${err.message}`));
          console.log(err.stack);
        }
        observer.complete();
      }).on('httpUploadProgress', function (progress) {
        const percentage = (progress.loaded) * 100 / progress.total;
        observer.next(new FileUploadStatus(file.name, percentage, null));
      });
    });
  }

After further investigation I noticed the method isBrowser() is using node_module@type Process object to verify if the sdk is running in a browser,

Basically, your code look like this:

 isBrowser: function isBrowser() { return process && process.browser; },

The problem is "process" in Angular 6.0.3 / Node 8.11.3 returns an object that seems not to be properly initialised and processs.browser returns undefined, see JSON version of the object returned below:

"{"env":{},"version":[]}"

In version Angular 5.2.0 / Node 6.14.3 the object returned is this:

{"title":"browser","browser":true,"env":{},"argv":[],"version":"","versions":{}}

I am not sure if this a bug in the SDK, Nodes or Angular. Neither if this is a bug or some configuration I am missing.

These are my dependencies:

  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "@ng-bootstrap/ng-bootstrap": "^2.2.0",
    "@types/zen-observable": "^0.8.0",
    "angular2-uuid": "^1.1.1",
    "aws-amplify": "^0.4.4",
    "aws-amplify-angular": "^0.1.4",
    "aws-sdk": "^2.266.1",
    "core-js": "^2.5.4",
    "rxjs": "^6.2.1",
    "rxjs-compat": "^6.2.1",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.8",
    "@angular/cli": "^6.0.8",
    "@angular/compiler-cli": "^6.0.3",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^10.3.5",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^5.3.0",
    "puppeteer": "^1.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "2.7.2"
  }

Note there was a bug with the new version of RXJS required by angular 6 and @types/node needed to be migrated to the last version 10.3.5.

[carlara75]

Just an update, I upgraded dependencies to Angular 6.0.9 and aws-sdk 2.276.1 and problem still persists.

[Karthi-SRV]

Hi,

I am to getting the same error . I am using Angular 6.0.8, node 8.11.2 andaws-sdk 2.279.1 and problem still persists.

[Karthi-SRV]

Hi, I have debugged the aws-sdk and came to solution that in angular 6 global is not declared by default, so to declared the global we used below code

  var global = global || window;
  var Buffer = Buffer || [];
  var process = process || {
      env: { DEBUG: undefined },
      version: []
  };

After some research I found the key point where system goes wrong /node_module/aws-sdk/lib/utils.js

isNode: function isNode() { return !util.isBrowser(); },
isBrowser: function isBrowser() { return process && process.browser; },

So, in isBrowser function process.browser is undefined so it return false.
By default in browser_loader.js , if process is undefined they will set as browser true.

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

So, to declare some of global function which taken out in Angular 6, we should not declare process value by own.

simply isBrowser() function ... which doesn't come from Angular returns the unexpected value ... "{"env":{},"version":[]}" instead {"title":"browser","browser":true,"env":{},"argv":[],"version":"","versions":{}} so SDK can't correctly evaluate in which environment it's running. "browser":true is missing.

[carlara75]

Hi Karthi,

If you read my post, more or less I got to the same conclusion.
I am not actively chasing this issue because I have an stack of things to do and the hack I documented above works for the time being, however I would be nice to have the official fix.

[Karthi-SRV]

Hi carlara75 ,

I am concluded that there is no issue in the AWS SDK in front-end, it may because of the global variable you have added for Angular 6.

 var global = global || window;
  var Buffer = Buffer || [];
  var process = process || {
      env: { DEBUG: undefined },
      version: []
  };

The issue is that we have declared process variable.

[carlara75]

Hi Karthi,

As I said at the end of the original post I was not sure if the problem was AWS-SDK, Angular or Nodes. This is my first project with Angular 5/6 and the AWS-SDK and things like this are challenging when learning.

Just to complete your comment above, the script below is added when migrating Angular from 5 to 6 on ${PROJECT-ROOT}/src/index.html:

<script>
var global = global || window;
  var Buffer = Buffer || [];
  var process = process || {
      env: { DEBUG: undefined },
      version: []
  };
</script>

As you said before, the issue disappear when removing var process = { ... } from this script:

<script>
var global = global || window;
var Buffer = Buffer || [];
</script>

Many thanks for this.
Hopefully this does not break something else down the line.

Cheers,
Carlos

[carlara75]

Karthi found out the issue is not in the SDK but in the migration process from Angular 5 to 6.
Closing the issue.

[DeveloperAsela]

I just edited, for testing purpose only, line 40 to
isNode: function isNode() { return false },
instead
isNode: function isNode() { return !util.isBrowser(); },

@carlara75 Thank you.this is worked for me

[carlara75]

Hi DeveloperAsela,
Careful with this change, this was just a hack to make things work when I upgrade my project from Angular 5 to 6 meanwhile investigating. See the comment above and you will find maybe your problem is related to the variable process being included at ${PROJECT-ROOT}/src/index.html as one of the upgrade guides points out.

Your scripts in index.html should look like below (without any variable process defined or overwritten):

<script>
var global = global || window;
var Buffer = Buffer || [];
</script>

Cheers
Carlos

[DeveloperAsela]

hi carlara75,
<script> var global = global || window; var Buffer = Buffer || []; </script> i change like this in index.html and it works.Thank you @carlara75.:-)

[Bodeclas]

Hello @carlara75 I have a problem with this change.

I'm using Algolia Search for Angular 6 and they say:

If you are using Angular v6 you will need an extra step, polyfill process.env by adding in your src/polyfill.ts:

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

I need add env.process to run my project with Algolia.

What could I do to solve my problem?

https://community.algolia.com/angular-instantsearch/guides/migration-guide.html

[carlara75]

Hello @carlara75 I have a problem with this change.

I'm using Algolia Search for Angular 6 and they say:

If you are using Angular v6 you will need an extra step, polyfill process.env by adding in your src/polyfill.ts:

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

I need add env.process to run my project with Algolia.

What could I do to solve my problem?

https://community.algolia.com/angular-instantsearch/guides/migration-guide.html

Sorry for the delayed response. I am far from being an Angular expert, however I would like to help if I can. Note I am not familiar with Algolia at all and without a source code to look at and your error stack trace I am blind.

My suggestions:

• open a proper question/bug at the Algolia support page.
• open a question in stackoverflow or similiar community pages with a sample code, your package.json, and the error stack trace and share with me the link.

This post was opened for an issue I found when upgraded from Angular 5 to 6 and the AWS-SDK.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs and link to relevant comments in this thread.