Internet Explorer 11 and Edge throws error Invalid calling object

[alolis]

Hello,

I am getting the following error in Internet Explorer 11 and Edge. It works perfectly fine under Safari, Chrome, Firefox:

The file that the code which you see in the debugger is this: https://github.com/tus/tus-js-client/blob/master/lib.es5/browser/base64.js

Stacktrace shows the call happens here, just before the exception: https://github.com/tus/tus-js-client/blob/master/lib/upload.js#L298

Has anyone seen this? I am using version 1.4.3

[alolis]

UPDATE:

If I change this:

export function encode(data) {
  return btoa(unescape(encodeURIComponent(data)));
}

to this

export function encode(data) {
  return window.btoa(unescape(encodeURIComponent(data)));
}

and do a npm run transpile within the project, it seems to be working.

The file I did the change is here: https://github.com/tus/tus-js-client/blob/master/lib/browser/base64.js

[Acconut]

Unfortunately, I wasn't able to reproduce your issues. I used http://rawgit.com/tus/tus-js-client/master/demo/index.html for my testing (it uses metadata and therefore calls the function where the stack trace pointed) on Internet Explorer 11 and Edge 15, but wasn't able to spot any problems. Our test infrastructure, which also includes those browsers, does not report any, either.

Could you please provide further details? Could this be related to other tools you use for building your JavaScript files?

[alolis]

@Acconut Thanks for getting back to me. I tried the demo as well and it's indeed working normally.

I am using tus-js-client (v1.4.3) within a react v15.6 application which I am using babel-core (v6.9.1) with webpack (v1.13.1) to transpile. I also use babel-polyfill (v6.16.1) to support older browser environments. The problem also occurs with the development environment when I run the project with babel-node. The react application is served by node.js (v.6.9.1)

I am using it within a React component like so (these are methods within the component):

  // The `file` parameter is a custom stucture of mine and file.source 
  // contains the original file from the input field

  createUpload(file) {
    return new tus.Upload(file.source, {
      endpoint: this.props.endpoint,
      metadata: file.metadata,
      headers: {
        [Constants.AUTHENTICATION_HEADER_TOKEN]: this.props.authToken
      },

      onError: (error) => {
        this.onError(file, error);
      },

      onProgress: (bytesUploaded, bytesTotal) => {        
        this.onProgress(file, bytesUploaded, bytesTotal);
      },

      onSuccess: () => {
        this.onSuccess(file);
      }
    });
  }

  upload(file) {   
    const upload = this.createUpload(file);

    this.eventEmitter.on(EVENT_ABORT_FILE, (fileId) => {
      if (file.id === fileId) {
        upload.abort();
      }
    });

    this.eventEmitter.on(EVENT_ABORT_ALL, () => {
      upload.abort();
    });

    upload.start()
  }

The problem occurs after upload.start().

Do you have any initial thoughts about what might be happening? perhaps something gets conflicted with the compilation? If i change the line i mentioned to window.boa from boa then everything works.

Thank you for your time.

[alolis]

UPDATE:

@Acconut, The babel compiled version for production, seems to be working normally. This is insanity.

This probably explains why your demo works as well.

[Acconut]

Very interesting situation, if I may say so :) As it turns out you are not the first person to discover issues with this (e.g. https://github.com/auth0/jwt-decode/issues/29).

Would it be possible for you to provide a minimal example/configuration which triggers this error so I can attempt to debug it for myself?

[psi-4ward]

Same here. webpack-dev-server throws this, transpiled production build works.

[Acconut]

As I said previously, I wasn't able to reproduce this error. Could you provide a minimal example which triggers this error so I can attempt to debug it for myself?

[uglow]

FWIW, on a completely separate project (a Nuxt.js application) I saw the same error (invalid calling object) in IE11 on Win10 when the server-side logs appeared within the IE11 console. I think Nuxt uses the consola library to do this. This is in Dev mode. When I disable the console.log() that was being executed on the server (and appearing in the browser console), the error disappears.

[Acconut]

@uglow Thanks for the information, that may help! You weren't using tus in your project, were you?

[uglow]

No, I was not.

Sent from my iPhone

On 2 Aug 2019, at 6:23 pm, Marius notifications@github.com<mailto:notifications@github.com> wrote:

@uglowhttps://github.com/uglow Thanks for the information, that may help! You weren't using tus in your project, were you?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/tus/tus-js-client/issues/77?email_source=notifications&email_token=AA6OFLOVLGM7GPHPL2YFTWTQCPVHFA5CNFSM4DPMFQE2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD3NBJAQ#issuecomment-517608578, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AA6OFLNUQT6RESG7224TX5LQCPVHFANCNFSM4DPMFQEQ.

[Acconut]

Closing this issue due to inactivity. Feel free to leave a comment if you want to continue the discussion. A possible fix might be https://github.com/mulesoft/js-client-oauth2/pull/70/files if we can reproduce the behavior.

[coolguy284]

I know I'm just commenting on a random GitHub thread, but from my experimentation, the problem seems to be with calling renamed global functions, or at least relates to it. (found this thread by googling the error)

For example, this code works fine on Firefox, but fails on Edge: setTimeout(console.log, 0, 'lol'); // works properly\ setThymeout = setTimeout;\ setThymeout(console.log, 0, 'lol'); // Error: Invalid calling object\ setThymeout2 = setThymeout.bind(window);\ setThymeout2(console.log, 0, 'lol'); // works fine somehow

The problem is also mentioned here: https://github.com/vuejs/vue/issues/4465

This is my first comment on a GitHub repo ever, so tell me if I'm doing something wrong.

[Acconut]

Thank you very much, @coolguy284! Your example helps a lot in understanding the situation. Since this issue did not appear in the last years in our issue tracker and this looks like misbehavior in the build tool (webpack), I am going to close this.

If anyone has the same problem with tus-js-client, feel free to comment anyway.