Amplify-js: I can't use amplify on internet explorer 11

[hryktrd]

Describe the bug
I'm using Angular8 and I included Amplify like below

import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

I've confirmed that it works fine on Chrome and Edge but InternetExplorer displayed the following message

SCRIPT438: Object doesn't support property or method 'from'

I think this might be caused by same as following issue
https://github.com/angular/preboot/issues/63

Can you fix it?
To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

-- or --

Link to sample code

Expected behavior
A clear and concise description of what you expected to happen.

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

Environment

npx envinfo --system --binaries --browsers --npmPackages --npmGlobalPackages

Smartphone (please complete the following information):

• Device: PC
• OS: Windows 10
• Browser InternetExplorer11
• Version 11

Additional context
Add any other context about the problem here.

Sample code
Include additional sample code or a sample repository to help us reproduce the issue. (Be sure to remove any sensitive data)

_You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = 'DEBUG'; in your app._

[ericclemmons]

You're right, IE11 should work since we maintain the same browser compatibility as:

https://aws.amazon.com/premiumsupport/knowledge-center/browsers-management-console/

I suspect the problem is with Array.from usage not being polyfilled to support IE11 (which doesn't support Array.from):

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#Browser_compatibility

I'll need a moment to setup my environment to reproduce, but I was curious if the following works in IE11 for you?

import 'babel-polyfill';
import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

[hryktrd]

Thank you for your reply.

I tried your code but cli displayed following message

ERROR in ./src/main.ts
Module not found: Error: Can't resolve 'babel-polyfill' in 'C:\Develop\chat\icon-chat\src'

so I tried following import on main.ts

import '@babel/polyfill';

this import is successfully but Browser displayed same error.

I'm looking forward to your update.

Thank you.

[ericclemmons]

Oh, I'm sorry! I should've mentioned this part: you need to npm i --save babel-polyfill first.

There is indeed usage of Uint8Array.from, which seems to be the culprit. I'm investigating if this is a regression and, if so, what release/commit introduced it.

[hryktrd]

Thank you.
I tried

npm i --save @babel/polyfill

And now, I tried

npm i --save babel-polyfill

and import in main.ts as following

import 'babel-polyfill';
import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

Then build finished successfully but Internet Explorer displayed same error message.

Thank you.

[ericclemmons]

Ok, then I'll dig into when this regression occurred. Thanks for the quick turnaround @hryktrd.

[gautamcparmar]

Describe the bug
I'm using Angular8 and I included Amplify like below

import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

I've confirmed that it works fine on Chrome and Edge but InternetExplorer displayed the following message

SCRIPT438: Object doesn't support property or method 'from'

I think this might be caused by same as following issue
angular/preboot#63

Can you fix it?
To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

-- or --

Link to sample code

Expected behavior
A clear and concise description of what you expected to happen.

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

Environment
Smartphone (please complete the following information):

• Device: PC
• OS: Windows 10
• Browser InternetExplorer11
• Version 11

Additional context
Add any other context about the problem here.

Sample code
Include additional sample code or a sample repository to help us reproduce the issue. (Be sure to remove any sensitive data)

_You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = 'DEBUG'; in your app._

Probably you are missing Typed Array polyfill.
import 'core-js/es/typed-array';

[michelschmit]

@gautamcparmar where do you put import 'core-js/es/typed-array';? :thinking:

[michelschmit]

Ok the error come from Uint32Array.from() in aws-amplify-predictions.js (in @aws-amplify) and maybe in index.ts (in @aws-crypto).
I've transpiled the two modules with transpileDependencies: [/node_modules\/@aws-amplify/, /node_modules\/@aws-crypto/].
Now i can display the component Authenticator on IE, but il have an error when i submit : 'fetch' is undefined. Any idea?
Also add https://github.com/github/fetch to polyfill the window.fetch() func. Now it's working.

[ericclemmons]

@michelschmit I'm glad you were able to find an resolution.

We're still investigating this as there are a couple issues to address:

1. Documentation for window.fetch & IE11-specific requirements, as IE11 doesn't have it and it's a large enough polyfill that including it with Amplify would impact the majority of users.
2. Several parts of are code _have_ been
   polyfilled (e.g. Number.isInteger via #185), and it looks like we previously covered the Uint32Array.from feature.

[michelschmit]

@ericclemmons Also the css doesn't seem to have been polyfilled for IE in @aws-amplify:

[ExSpecter]

For me adding import 'core-js/es6/typed'; to polyfills.js (working with angular) helped fix the Uint32Array.from problem

[hryktrd]

Hi.
How is the progress of this fix?

I'm looking forward to your update.
Best regards.

[deansimcox]

Like others here, I got around this by importing core-js components and a promise polyfill.
So I ran:

npm i --save core-js promise-polyfill

And then my import list looks like this:

import 'promise-polyfill/src/polyfill';
import 'core-js/es/typed-array/uint32-array';
import 'core-js/es/array/find';
import 'core-js/es/object/assign';
import 'core-js/es/object/entries';

Hope that helps someone.

[michelschmit]

Hi, is someone find a solution to have colors on IE11 ? Since aws-amplify set colors with var() and the css variables aren't supported by IE...
(cf:

• https://github.com/aws-amplify/amplify-js/issues/4515#issuecomment-565464963
• https://github.com/aws-amplify/amplify-js/blob/master/packages/amplify-ui/src/Theme.css#L31
• https://caniuse.com/#search=css%20variable)

thanks !

[ericclemmons]

@michelschmit That's an excellent callout! Can you add this to https://github.com/aws-amplify/amplify-js/issues/3279 so we can track it as part of our UI efforts?

[mattiLeBlanc]

Any update on these annoying old browser support issues? IE11 is still having issues when I added these polyfills

import 'promise-polyfill/src/polyfill';
import 'core-js/es/typed-array/uint32-array';
import 'core-js/es/array/find';
import 'core-js/es/object/assign';
import 'core-js/es/object/entries';

It is still complaining about Uint32Array.from being undefined.

[cshouts-tasc]

@mattiLeBlanc It's not a great long-term solution, but if you downgrade to aws-amplify v2.2.7 it should work on IE11.

[mattiLeBlanc]

@cshouts-tasc Or implement a Babel conversion of the es6 file that is causing the error?
I was getting a hickup on a fat arrow in the source code, I think that also came from the es6 file that was part of one of the amplify dependencies.

[smakinson]

I'm seeing a syntax error in ie11 and if I search the node_module directory, aws-amplify/dist I find the line that comes up when I click the error in IE dev tools. It appears to be related to at least one arrow function in the min file:

t.getSerdePlugin=function(e,n,o){return{applyToStack:s=>{

Seems I am running into the same as @mattiLeBlanc

[ericclemmons]

Thanks for the investigation @smakinson! That narrows the cause down to a single dependency for us to focus on.

[smakinson]

My search also came up with the same thing in @aws-amplify/datastore/dist/aws-amplify-datastore.min.js

[masbaehr]

Same issue, this needs a fast fix, as it makes it impossible to use amplify for business-applications where IE11 is still used

For me the error is here:

[jonasduever]

@masbaehr I think you're experiencing this issue: https://github.com/aws-amplify/amplify-js/issues/5582

[lukeburns]

DataStore also uses proxies, which are not supported in IE11. https://github.com/aws-amplify/amplify-js/blob/e85640a4e18fa1d55411038fee58919ad73121fa/packages/datastore/src/predicates/index.ts#L47

Proxies can't be fully polyfilled, so if IE11 support is a goal, predicate handling would have to be changed.

[KwFung7]

I am using latest version, but the arrow function in amplify still crash my whole app in IE 11,
when can it be fix ?

[KwFung7]

I got same issue with @masbaehr, I must use amplify to connect to aws, but my client request browser support on IE as well

[KwFung7]

aws/aws-sdk-js-v3#1319
The issue should be fixed in latest aws sdk v1.0.0-gamma.3 release (https://github.com/aws/aws-sdk-js-v3/releases/tag/v1.0.0-gamma.3)

[dylan-westbury]

Experiencing this issue in IE11 also using "aws-amplify": "^3.0.19".

[sammartinez]

resolving as this is fix is within our latest release, 3.0.22

[noamyg]

This issue was a pain in the... even by IE standards.
Finally got it fixed by:

1. Upgrading to "aws-amplify": "^3.0.23" and "aws-amplify-angular": "^5.0.23"
2. Adding the following polyfills:

import 'core-js/es6/typed';
import 'core-js/es7/object';
import "isomorphic-fetch"; //Run `npm install --save isomorphic-fetch es6-promise` for this

[davidjaldred]

Just to add to @noamyg's comment, typed array polyfills have been split in core-js ^3.0.0

If you're using core-js@3, you can add the necessary polyfills with the following imports:

import "core-js/es/typed-array/from";
import "core-js/es/object";