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
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

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';

[m8schmit]

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

[m8schmit]

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 Add Utils method to check for integer #185), and it looks like we previously covered the Uint32Array.from feature.

[m8schmit]

@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.

[m8schmit]

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:

• I can't use amplify on internet explorer 11 #4515 (comment)
• 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 #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: #5582

[lukeburns]

DataStore also uses proxies, which are not supported in IE11.

amplify-js/packages/datastore/src/predicates/index.ts

Line 47 in e85640a

const predicate = new Proxy(

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";

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.