New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Does not work in IE11 #237

Closed
jusper-dk opened this Issue Sep 11, 2018 · 20 comments

Comments

Projects
None yet
8 participants
@jusper-dk

jusper-dk commented Sep 11, 2018

Category

  • Enhancement
  • [X ] Bug
  • Question
  • Documentation gap/issue

Version

1.2.1

Expected / Desired Behavior / Question

var q = sp.web.lists.getById('123').items.select(['Title'])
q.toUrlAndQuery()

returns:
"_api/web/lists('123')/items?$select=Title"

Observed Behavior

Causes an error. With additional polyfills returns

"_api/web/lists('123')/items?"

Steps to Reproduce

Just make any request to a list

@koltyakov

This comment has been minimized.

Show comment
Hide comment
@koltyakov

koltyakov Sep 11, 2018

Member

Please check the documentation on this. ES6 Promises and Fetch polyfills are required.

Member

koltyakov commented Sep 11, 2018

Please check the documentation on this. ES6 Promises and Fetch polyfills are required.

@jusper-dk

This comment has been minimized.

Show comment
Hide comment
@jusper-dk

jusper-dk Sep 11, 2018

Already checked - does not help. At least 'Array.from' implementation is required now but even with a corresponding polyfill, the following code does not work since IE does not support iterators for Map and Set:
url += "" + char + Array.from(aliasedParams).map(function (v) { return v[0] + "=" + v[1]; }).join("&");

jusper-dk commented Sep 11, 2018

Already checked - does not help. At least 'Array.from' implementation is required now but even with a corresponding polyfill, the following code does not work since IE does not support iterators for Map and Set:
url += "" + char + Array.from(aliasedParams).map(function (v) { return v[0] + "=" + v[1]; }).join("&");

@jusper-dk

This comment has been minimized.

Show comment
Hide comment
@jusper-dk

jusper-dk Sep 11, 2018

Furthermore, it can't be fixed as simple as adding extra polyfills for Map because of another bug in the built-in polyfills:
SharePoint/sp-dev-docs#888

jusper-dk commented Sep 11, 2018

Furthermore, it can't be fixed as simple as adding extra polyfills for Map because of another bug in the built-in polyfills:
SharePoint/sp-dev-docs#888

@gregwilton

This comment has been minimized.

Show comment
Hide comment
@gregwilton

gregwilton Sep 12, 2018

I've been running into this issue as well. It's not exactly an issue with the PnP JS library but I'm coming to the conclusion that if support for IE 11 is required then Array.from can't be used with Map objects (which is what the toUrlAndQuery method is doing).

The simplest way to test is by adding the following to a blank HTML page:

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<script>
  console.log(Array.from(new Map([['$select', 'Url']])));
</script>

Chrome will output an array of length 2 but IE 11 will output an empty array.

Which I think might be caused by this issue mentioned on the Array.from MDN page.

In addition, since true iterables can not be polyfilled, this implementation does not support generic iterables as defined in the 6th edition of ECMA-262.

Also related: Polyfill fails in IE11 when using Array.from of a Map.

gregwilton commented Sep 12, 2018

I've been running into this issue as well. It's not exactly an issue with the PnP JS library but I'm coming to the conclusion that if support for IE 11 is required then Array.from can't be used with Map objects (which is what the toUrlAndQuery method is doing).

The simplest way to test is by adding the following to a blank HTML page:

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<script>
  console.log(Array.from(new Map([['$select', 'Url']])));
</script>

Chrome will output an array of length 2 but IE 11 will output an empty array.

Which I think might be caused by this issue mentioned on the Array.from MDN page.

In addition, since true iterables can not be polyfilled, this implementation does not support generic iterables as defined in the 6th edition of ECMA-262.

Also related: Polyfill fails in IE11 when using Array.from of a Map.

@jusper-dk

This comment has been minimized.

Show comment
Hide comment
@jusper-dk

jusper-dk Sep 13, 2018

So, am I right that you're not going to support IE11 anymore? The bug originally appeared in 1.1.5. 1.1.4 works fine in IE11.

jusper-dk commented Sep 13, 2018

So, am I right that you're not going to support IE11 anymore? The bug originally appeared in 1.1.5. 1.1.4 works fine in IE11.

@koltyakov

This comment has been minimized.

Show comment
Hide comment
@koltyakov

koltyakov Sep 13, 2018

Member

We're are not going to do not support IE11.
Figuring out, with my usual set of polyfills I face no issues in IE11, but there are issues in IE10 (which is also bad as some OnPrem installation are configured by default to use IE10 compatibility mode).

@gregwilton this is a result in IE11 on a random project with standard polyfills set I use in many project setups:
image

Member

koltyakov commented Sep 13, 2018

We're are not going to do not support IE11.
Figuring out, with my usual set of polyfills I face no issues in IE11, but there are issues in IE10 (which is also bad as some OnPrem installation are configured by default to use IE10 compatibility mode).

@gregwilton this is a result in IE11 on a random project with standard polyfills set I use in many project setups:
image

@koltyakov

This comment has been minimized.

Show comment
Hide comment
@koltyakov

koltyakov Sep 13, 2018

Member

I have these polyfills along with Fetch and ES6 Promise:

import 'core-js/es6/array';
import 'es6-map/implement';

Could you guys please check is these polyfills help in your project setup?

Member

koltyakov commented Sep 13, 2018

I have these polyfills along with Fetch and ES6 Promise:

import 'core-js/es6/array';
import 'es6-map/implement';

Could you guys please check is these polyfills help in your project setup?

@gregwilton

This comment has been minimized.

Show comment
Hide comment
@gregwilton

gregwilton Sep 13, 2018

@koltyakov Yes, you're right. Sorry my testing was a bit off.

It looks like the issue I was seeing is specific to cdn.polyfill.io service. I was testing with that because it was listed in the Polyfills example.

Using es6-map/implement has fixed the issue for me as it can be loaded in SPFx webparts without causing the "Out of stack space" error that was mentioned above and was happening with every other polyfill library I tried (testing with SPFx 1.6.0 and PnP JS 1.2.1).

So my understanding of the IE11 polyfills is -

When loading PnP JS anywhere other than SPFx web parts:

import 'core-js/es6/array';
import 'es6-map/implement';
import 'core-js/es6/promise';
import 'whatwg-fetch';

When loading within SPFx:

import 'core-js/es6/array';
import 'es6-map/implement';

Promise and fetch are already loaded (by sp-polyfills I think).

gregwilton commented Sep 13, 2018

@koltyakov Yes, you're right. Sorry my testing was a bit off.

It looks like the issue I was seeing is specific to cdn.polyfill.io service. I was testing with that because it was listed in the Polyfills example.

Using es6-map/implement has fixed the issue for me as it can be loaded in SPFx webparts without causing the "Out of stack space" error that was mentioned above and was happening with every other polyfill library I tried (testing with SPFx 1.6.0 and PnP JS 1.2.1).

So my understanding of the IE11 polyfills is -

When loading PnP JS anywhere other than SPFx web parts:

import 'core-js/es6/array';
import 'es6-map/implement';
import 'core-js/es6/promise';
import 'whatwg-fetch';

When loading within SPFx:

import 'core-js/es6/array';
import 'es6-map/implement';

Promise and fetch are already loaded (by sp-polyfills I think).

@jusper-dk

This comment has been minimized.

Show comment
Hide comment
@jusper-dk

jusper-dk Sep 13, 2018

I can confirm now that 'es6-map' works fine for me too. Here are the polyfills that make pnp/sp working in ie11:

import 'core-js/modules/es6.promise'
import 'whatwg-fetch'

import 'core-js/modules/es6.array.iterator.js'
import 'core-js/modules/es6.array.from.js'

import 'es6-map/implement'

jusper-dk commented Sep 13, 2018

I can confirm now that 'es6-map' works fine for me too. Here are the polyfills that make pnp/sp working in ie11:

import 'core-js/modules/es6.promise'
import 'whatwg-fetch'

import 'core-js/modules/es6.array.iterator.js'
import 'core-js/modules/es6.array.from.js'

import 'es6-map/implement'
@patrick-rodgers

This comment has been minimized.

Show comment
Hide comment
@patrick-rodgers

patrick-rodgers Sep 13, 2018

Member

Hi all, getting back from a cancelled vacation and just catching up. For folks needing IE11 I am curious what your organizations plan is to transition off of what is now a legacy browser? Are real folks impacted or are these left over tests that fail because you are still testing against IE11? This is now a 5 year old browser so it is hard to limit what we can do based on that. I do understand companies standardize and are slow to move for many reasons (almost always out of developers controls) so I do sympathize - but moving to Map has performance advantages as well as removes the extra code we had to support the custom dictionary.

Member

patrick-rodgers commented Sep 13, 2018

Hi all, getting back from a cancelled vacation and just catching up. For folks needing IE11 I am curious what your organizations plan is to transition off of what is now a legacy browser? Are real folks impacted or are these left over tests that fail because you are still testing against IE11? This is now a 5 year old browser so it is hard to limit what we can do based on that. I do understand companies standardize and are slow to move for many reasons (almost always out of developers controls) so I do sympathize - but moving to Map has performance advantages as well as removes the extra code we had to support the custom dictionary.

@PooLP

This comment has been minimized.

Show comment
Hide comment
@PooLP

PooLP Sep 14, 2018

Hi,

I have the same issue, but solution from @gregwilton work perfectly for me

@patrick-rodgers
For SPFx use, the response is simple : https://support.office.com/en-us/article/which-browsers-work-with-office-online-ad1303e0-a318-47aa-b409-d3a5eb44e452

Microsoft Office Online keep compatibility with IE11, pnp.js must compatibility with this (even if it's a mistake for me that Microsoft still keeps this compatibility ^^).

PooLP commented Sep 14, 2018

Hi,

I have the same issue, but solution from @gregwilton work perfectly for me

@patrick-rodgers
For SPFx use, the response is simple : https://support.office.com/en-us/article/which-browsers-work-with-office-online-ad1303e0-a318-47aa-b409-d3a5eb44e452

Microsoft Office Online keep compatibility with IE11, pnp.js must compatibility with this (even if it's a mistake for me that Microsoft still keeps this compatibility ^^).

@jusper-dk

This comment has been minimized.

Show comment
Hide comment
@jusper-dk

jusper-dk Sep 14, 2018

Are real folks impacted or are these left over tests that fail because you are still testing against IE11?

A lot of our customers continue using IE11 and we've got complaints from them :(

jusper-dk commented Sep 14, 2018

Are real folks impacted or are these left over tests that fail because you are still testing against IE11?

A lot of our customers continue using IE11 and we've got complaints from them :(

@patrick-rodgers

This comment has been minimized.

Show comment
Hide comment
@patrick-rodgers

patrick-rodgers Sep 15, 2018

Member

You both skipped the second question, what is their plan to migrate off IE11? The alternative is that you are saying "you can never use any features not supported by IE11, ever" is simply no good. We can document the polyfills as outlined above, happy to do that. But we aren't part of the PG and as such can make different decisions on supported browsers. We don't want to break folks and will document the polyfills - but again what are you doing to advocate with your customers that they need to upgrade?

Member

patrick-rodgers commented Sep 15, 2018

You both skipped the second question, what is their plan to migrate off IE11? The alternative is that you are saying "you can never use any features not supported by IE11, ever" is simply no good. We can document the polyfills as outlined above, happy to do that. But we aren't part of the PG and as such can make different decisions on supported browsers. We don't want to break folks and will document the polyfills - but again what are you doing to advocate with your customers that they need to upgrade?

@PooLP

This comment has been minimized.

Show comment
Hide comment
@PooLP

PooLP Sep 17, 2018

Hi @patrick-rodgers
I advise the use of Chrome or Firefox for my customers, but it is not me, a small developer who decides instead of IT services.

Microsoft sells its products with a compatibility level (see my other post), it' a base information for my customers and when, for example, my customers have a SPFx component bug on IE, we have the obligation to resolve the bug.

The only way that Microsoft gives us to express itself is UserVoices, but this is not really considered by Microsoft (ex: https://sharepoint.uservoice.com/forums/329220-sharepoint-dev-platform/suggestions/14691270-add-managed-metadata-term-store-operations-to-rest) ...

Maybe MVPs have more weight to make things happen at Microsoft.

I do not blame you for that, you're doing amazing great work and I agree on the use of the new JS methods and more, but there will still the Polyfills any time if IE still be supported by Microsoft products, i'm sorry, but it will also be necessary to document them.

PooLP commented Sep 17, 2018

Hi @patrick-rodgers
I advise the use of Chrome or Firefox for my customers, but it is not me, a small developer who decides instead of IT services.

Microsoft sells its products with a compatibility level (see my other post), it' a base information for my customers and when, for example, my customers have a SPFx component bug on IE, we have the obligation to resolve the bug.

The only way that Microsoft gives us to express itself is UserVoices, but this is not really considered by Microsoft (ex: https://sharepoint.uservoice.com/forums/329220-sharepoint-dev-platform/suggestions/14691270-add-managed-metadata-term-store-operations-to-rest) ...

Maybe MVPs have more weight to make things happen at Microsoft.

I do not blame you for that, you're doing amazing great work and I agree on the use of the new JS methods and more, but there will still the Polyfills any time if IE still be supported by Microsoft products, i'm sorry, but it will also be necessary to document them.

@jpalo

This comment has been minimized.

Show comment
Hide comment
@jpalo

jpalo Sep 17, 2018

My SPFx web part (fairly complex) wasn't displaying anything on IE11 (workbench or deployed) - and IE wasn't even showing any errors in console. Fortunately the following fixed it.

As a side-comment, customers are using IE11, so there's nothing we can do, except make everything work on IE11 as well. It will take years for the larger companies to move on from IE11, mainly due to legacy corporate applications only working on IE...

import "core-js/es6/array";
import "es6-map/implement";
import "core-js/modules/es6.array.find";

jpalo commented Sep 17, 2018

My SPFx web part (fairly complex) wasn't displaying anything on IE11 (workbench or deployed) - and IE wasn't even showing any errors in console. Fortunately the following fixed it.

As a side-comment, customers are using IE11, so there's nothing we can do, except make everything work on IE11 as well. It will take years for the larger companies to move on from IE11, mainly due to legacy corporate applications only working on IE...

import "core-js/es6/array";
import "es6-map/implement";
import "core-js/modules/es6.array.find";
@patrick-rodgers

This comment has been minimized.

Show comment
Hide comment
@patrick-rodgers

patrick-rodgers Sep 19, 2018

Member

Please have a look at #246 and let us know if that makes things more clear. Thanks!

I totally understand not having control of what browsers folks use, but we all need to be advocates of moving to newer technologies. When you say it will take years for folks to move, IE 11 is 5 years old at this point - that is ancient in terms of web development. I can say from experience there will be a day (no I don't have any special knowledge and this isn't an announcement) when IE 11 is no longer listed as supported for O365 and everything will drop support almost overnight. There is already pressure to do that coming from many sides. At that point companies will be forced to migrate, which is a painful process. The more we all can do to prepare folks and get things transitioned early actually benefits our customers and developers equally.

Member

patrick-rodgers commented Sep 19, 2018

Please have a look at #246 and let us know if that makes things more clear. Thanks!

I totally understand not having control of what browsers folks use, but we all need to be advocates of moving to newer technologies. When you say it will take years for folks to move, IE 11 is 5 years old at this point - that is ancient in terms of web development. I can say from experience there will be a day (no I don't have any special knowledge and this isn't an announcement) when IE 11 is no longer listed as supported for O365 and everything will drop support almost overnight. There is already pressure to do that coming from many sides. At that point companies will be forced to migrate, which is a painful process. The more we all can do to prepare folks and get things transitioned early actually benefits our customers and developers equally.

@PooLP

This comment has been minimized.

Show comment
Hide comment
@PooLP

PooLP Sep 20, 2018

it's ok for me.

PooLP commented Sep 20, 2018

it's ok for me.

@gregwilton

This comment has been minimized.

Show comment
Hide comment
@gregwilton

gregwilton Sep 20, 2018

That's very helpful. Being clear about what parts won't work should save people a lot of time.

I'd be quite happy if IE 11 support was officially dropped from O365. All of our O365 code will work in modern browsers and we encourage people to use Chrome but we're stuck in a position where we have to assume some people will be using IE 11 (particularly on sites used for collaborating with other companies).

gregwilton commented Sep 20, 2018

That's very helpful. Being clear about what parts won't work should save people a lot of time.

I'd be quite happy if IE 11 support was officially dropped from O365. All of our O365 code will work in modern browsers and we encourage people to use Chrome but we're stuck in a position where we have to assume some people will be using IE 11 (particularly on sites used for collaborating with other companies).

@s-KaiNet

This comment has been minimized.

Show comment
Hide comment
@s-KaiNet

s-KaiNet Sep 22, 2018

Contributor

There is one case though, when you simply can't upgrade your browser. I encountered an issue with lack of polyfills when developing office add-in. When add-in is loaded in desktop client, desktop client uses IE 11 internally... yeah desktop application in 2018 uses ancient legacy 5-years old browser :)

Extremely difficult to debug, no errors were thrown. That was a joy :)

Contributor

s-KaiNet commented Sep 22, 2018

There is one case though, when you simply can't upgrade your browser. I encountered an issue with lack of polyfills when developing office add-in. When add-in is loaded in desktop client, desktop client uses IE 11 internally... yeah desktop application in 2018 uses ancient legacy 5-years old browser :)

Extremely difficult to debug, no errors were thrown. That was a joy :)

@mag210

This comment has been minimized.

Show comment
Hide comment
@mag210

mag210 Sep 25, 2018

My SPFx web part (fairly complex) wasn't displaying anything on IE11 (workbench or deployed) - and IE wasn't even showing any errors in console. Fortunately the following fixed it.

As a side-comment, customers are using IE11, so there's nothing we can do, except make everything work on IE11 as well. It will take years for the larger companies to move on from IE11, mainly due to legacy corporate applications only working on IE...

import "core-js/es6/array";
import "es6-map/implement";
import "core-js/modules/es6.array.find";

Thanks, - this also resolved an issue I had with a new 1.6 SPFx webpart and using @pnp/sp. Agreed that IE11 needs to be catered for. As much as the browser is old hat, large organisations (particularly in the public sector) are going to use IE11 for years to come.

mag210 commented Sep 25, 2018

My SPFx web part (fairly complex) wasn't displaying anything on IE11 (workbench or deployed) - and IE wasn't even showing any errors in console. Fortunately the following fixed it.

As a side-comment, customers are using IE11, so there's nothing we can do, except make everything work on IE11 as well. It will take years for the larger companies to move on from IE11, mainly due to legacy corporate applications only working on IE...

import "core-js/es6/array";
import "es6-map/implement";
import "core-js/modules/es6.array.find";

Thanks, - this also resolved an issue I had with a new 1.6 SPFx webpart and using @pnp/sp. Agreed that IE11 needs to be catered for. As much as the browser is old hat, large organisations (particularly in the public sector) are going to use IE11 for years to come.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment