IE11 Event error

[davidmerrique]

I started getting

TypeError · Object doesn't support this action 

in disconnected on this line:

https://github.com/WebReflection/disconnected/blob/ed23b5dde33f62612632ff69863a9699a4ffa848/esm/index.js#L69

Something to do with using CustomEvent instead of Event?

regular-elements/esm/index.js

Line 28 in d7f1e61

var poly = {Event: CustomEvent, WeakSet: WeakSet};

Thanks

[davidmerrique]

I'm using Webpack BTW, I can't replicate this error in a CodePen example
I'm also seeing this error:

[WebReflection]

When in doubt, check the live test page:
https://webreflection.github.io/regular-elements/test/

But, as you can test yourself already, the bundled version delivered via unpkg also works without issues.

Accordingly, it looks like your Webpack is messing up with bundles, specially because IE11 has been tested with CustomEvent which is nothing but this:
https://github.com/ungap/custom-event/blob/master/index.js

You can test that live in here:
https://ungap.github.io/custom-event/test/index.html

Possible Solutions

• don't use Webpack, it messes up with modules published as both CJS and ESM, use Rollup
• tell Webpack to resolve any /^@ungap\/.+/ into /^@ungap\/.+/cjs and fallback always to the CommonJS version
• add this script as pre-bundled top level page dependency and use it through the global context

Hopefully there are better solutions that I'm not thinking about now, but this is definitively not an issue strictly related to this module.

If you find what's going on, please share so that others using Webpack might have a clue too.

Thanks.

[WebReflection]

P.S. maybe also relevant if you use rollup: WebReflection/hyperHTML#304 (comment)

[davidmerrique]

@WebReflection I figured it out, @ungap/custom-event is conflicting with js-polyfills's Event polyfill.

If I remove js-polyfills, it works fine.

[WebReflection]

@davidmerrique I believe it's the other way around, they provide a broken version of the Event or CustomEvent constructor.

As example, this feature detection is wrong. IE has CustomEvent but it's unusable as constructor.

Either you file bugs there or you ignore that polyfill and use dom4 instead, and other polyfills for the rest of the JS you need.

[WebReflection]

actually, this is pretty bad:
https://github.com/inexorabletash/polyfill/blob/master/dom.js#L233

[WebReflection]

@davidmerrique I've filed a PR there to fix their issue in polyfilling the CustomEvent. They are messing up with the attached prototype for no reason, I hope they'll fix that ASAP.

Once they do, you won't have any other trouble here.
inexorabletash/polyfill#152

[davidmerrique]

@WebReflection I took out js-polyfills but I have a similar problem.

I'm also using delegated-events, which requires polyfills for CustomEvent and WeakMap.

If I include your polyfills at the top of my bundle, I no longer get errors using regular/wicked-elements

import '@ungap/custom-event';
import '@ungap/weakmap';

But when I use delegated-events fire() I'm getting the same error

Object doesn't support this action

[davidmerrique]

If I include your polyfills outside the bundle

<script src="https://unpkg.com/@ungap/custom-event"></script>
<script src="https://unpkg.com/@ungap/weakmap"></script>
<script src="my-bundle.js"></script>

I get the errors when using regular/wicked-elements

Update:
So sorry about this if the problem is all on my end, but it seems like @ungap/custom-event doesn't play well with dom4?

<script src="https://unpkg.com/dom4"></script>
<script src="my-bundle.js"></script> <!-- contains regular-elements -->

Getting Object doesn't support this action
If I take out dom4, I don't get that error.

[davidmerrique]

Another update, you're right, it's just something Webpack is doing. Here's a pen that breaks:

https://codepen.io/davidmerrique/pen/eQaORp

[WebReflection]

@davidmerrique can you please re-try anything you are doing with latest versions of any package mentioned in this thread? Thank you.

[WebReflection]

P.S. I've also noticed this

import '@ungap/custom-event';
import '@ungap/weakmap';

This is not how you polyfill the global scope, you need to run these outside your bundler if that's what you want or you need to import them like this:

import CustomEvent from '@ungap/custom-event';
import WeakMap from '@ungap/weakmap';

Then you are sure whatever outcome is from ungap works in your bundle.

[davidmerrique]

Thank you ❤

Works perfectly. Even with js-polyfills (I'm working on replacing that)

[davidmerrique]

@WebReflection By the way, I was able to use imports-loader to polyfill the global scope from within my bundle and it appears to work well

// polyfills.legacy.js
import 'dom4';
import 'document-register-element';
import 'imports-loader?this=>window!@ungap/weakmap/index';
import 'imports-loader?this=>window!@ungap/custom-event/index';
import 'imports-loader?this=>window!@ungap/event-target/index';
import 'imports-loader?this=>window!@ungap/url-search-params/index';
// ... etc.

(polyfills.legacy.js is one of my webpack entry points and I'm using document.write to load it for IE)