IE11 PDP: Exception thrown and not caught, Object doesn't support property or method 'stencilBootstrap', String expected

[sacr3dc0w]

When testing in IE11, we noticed some exceptions being thrown frequently on PDP.

Expected behavior

No errors (other than the user browsing with IE11)

Actual behavior

SCRIPT5022: Exception thrown and not caught
File: theme-bundle.main.js, Line: 7706, Column: 3

SCRIPT438: Object doesn't support property or method 'stencilBootstrap'
File: labeltac-pro-x-industrial-labeling-system, Line: 4445, Column: 13

SCRIPT5005: String expected
File: recaptcha__en.js, Line: 2, Column: 137

Steps to reproduce behavior

Cornerstone 4.1.0
Stencil 1.20
Node 8.16.1
Mac OS 10.14.6

Boot up into IE11, go to a PDP, check console.

[kylebolstad]

It looks like it is an issue with object-fit-images itself.

fregante/object-fit-images#104 (comment)

Using a package like remove-strict-webpack-plugin solves the issue, but it is not a viable solution.

[sacr3dc0w]

zloirock/core-js#567

Moving <script src="https://www.google.com/recaptcha/api.js" async defer></script> below the bundle resolved the issue for us. Not ideal, but keeps IE11 traffic from bouncing.

[asiejnapsc]

Was there any definitive fix for this or workaround?

I'm a developer currently working on customizing this version of Cornerstone and we're getting the same issues in our IE 11 console which is hindering other JS from firing and disrupting customizations. I can provide a tunnel connection if needed.

Another thing to note, we saw that these errors disappeared after IE version 11.4. We noticed this when we saw inconsistencies between different IE browsers on other users' computers.

[sacr3dc0w]

Was there any definitive fix for this or workaround?

I'm a developer currently working on customizing this version of Cornerstone and we're getting the same issues in our IE 11 console which is hindering other JS from firing and disrupting customizations. I can provide a tunnel connection if needed.

Another thing to note, we saw that these errors disappeared after IE version 11.4. We noticed this when we saw inconsistencies between different IE browsers on other users' computers.

Moving <script src="https://www.google.com/recaptcha/api.js" async defer></script> below the bundle resolved the issue for us. Not ideal, but keeps IE11 traffic from bouncing.

Also have attached an example of our base.html so you can see the changes. GitHub required a .zip since .html isn't supported.

base.html.zip

[asiejnapsc]

@sacr3dc0w Thank you so much for this, this seemed to clear our console of errors as expected. Our custom JS works now too.

I apologize as I'm not too familiar with Stencil, but is there an explanation for this? What's happening with the built-in ReCaptchas that are throwing these errors in IE?

Thank you!

[sacr3dc0w]

@asiejnapsc I'm not entirely sure what the issue is. A lot of it goes above my head in JavaScript knowledge but from what I think I understand, there's duplicate polyfills.

zloirock/core-js#567

This is what led me to think "Hmm, shot in the dark but maybe if I move all Google files below the main bundle, it'll work again". I'm glad to hear you're back up and running! Cheers!

[oggede]

It's not only the Google ReCaptchas that doesn't work in IE 11 but also the "product options". These also don't work. If you have a product with additional options, like text fields or radio buttons, they will not appear, Only the add to cart button appears. Does anybody have a fix for this?

[sacr3dc0w]

If you haven't tried the fix I posted in a previous comment, I've attached and hope it resolves your issues. It resolved not only the issue with recaptchas, but the one you're describing with product options.

On our end, for products with optional accessories we want to sell as a line item. So we monitor product option changes to adjust the displayed price and that broke in IE11 around the time the recaptcha issues started occurring. Once this fix was rolled out, IE traffic returned to normal levels (sadly)

I've attached the base.html (in zip format)

Moving <script src="https://www.google.com/recaptcha/api.js" async defer></script> below the bundle resolved the issue for us. Not ideal, but keeps IE11 traffic from bouncing.

base.html.zip

[oggede]

Thanks. Can this fix be pulled in the next update.

[sacr3dc0w]

#1598 seemed to resolve my IE11 issues. How about you all?

[asiejnapsc]

@sacr3dc0w I just merged with the latest Cornerstone and took out your fix from base.html and everything seems to be working in IE11 on my machine.

I still have this updated version local so I will do more testing on other machines with different IE versions as that seemed to be an issue prior and will do a soft push live, will report back shortly. Thanks for the update!

[jbruni]

Hi, there.

Duplicate polyfills have been mentioned here.

Indeed, among the adventures in the journey to #1598 we experienced mysterious situations: the exact same theme worked in IE 11 in a BigCommerce store, but not in another!

What we have found (copy/pasting from our internal thread, with a few edits):

---

TL;DR ➡️ This JavaScript file is loaded only in Sandbox store and runs NodeList.forEach polyfill: https://cdn11.bigcommerce.com/shared/bower/checkout-sdk/dist/checkout-button.umd-0792489093856d7387bd3905924e0bc2c9158bc0.js

---

By comparing client's Production x Sandbox page's HTML source, I found that these script tags are only in Sandbox. They don't appear in Production:

<script type="text/javascript" src="https://cdn11.bigcommerce.com/shared/bower/checkout-sdk/dist/checkout-button.umd-0792489093856d7387bd3905924e0bc2c9158bc0.js" defer></script>
<script type="text/javascript" src="https://cdn11.bigcommerce.com/r-2665705a31510a822c866407a6433bb14bb2adf9/vendor/bower_components/braintree-web/index.js" defer></script>
<script type="text/javascript" src="https://cdn11.bigcommerce.com/r-2665705a31510a822c866407a6433bb14bb2adf9/javascript/braintree.js" defer></script>

After a few experiments, I found that the first of these scripts do load NodeList's polyfill.

You can load this very simple HTML document in IE 11:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://cdn11.bigcommerce.com/shared/bower/checkout-sdk/dist/checkout-button.umd-0792489093856d7387bd3905924e0bc2c9158bc0.js"></script>
</head>
<body>
    <p>Hi</p>
    <script>
        console.log('yep');
        x = document.querySelectorAll('p');
        console.log(x.forEach);
    </script>
</body>
</html>

As a result, you get in console:

If we just remove the <script> tag, we get this in console:

---

Soon after this, we found that this script tag containing core-js version 3 polyfills is tied to payment settings of the store. In the "Sandbox", we turned off Braintree and PayPal payment methods, and the script was not added to the page anymore.

[asiejnapsc]

@jbruni
Thank you for the clarification on this. That's good to know and glad this fix has been rolled out. So far, so good on our store in IE.

@sacr3dc0w
I noticed something with your workaround fix (edit to the base.html) - not that it matters with the update to core-js v3 but still wanted to mention because it seems related.

Prior to removing your fix and updating core-js, we were having issues on our Create an Account, Write a Review and Contact Us forms. Forms weren't sending because a non-existent Captcha was throwing an error. Now after the update and taking that code out of the base template, the Captchas appear and forms can be sent.

Again, not really relevant anymore but worth mentioning in case anyone else has this issue.