Closed davidmerrique closed 5 years ago
I'm using Webpack BTW, I can't replicate this error in a CodePen example I'm also seeing this error:
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
/^@ungap\/.+/
into /^@ungap\/.+/cjs
and fallback always to the CommonJS versionHopefully 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.
P.S. maybe also relevant if you use rollup: https://github.com/WebReflection/hyperHTML/issues/304#issuecomment-443950244
@WebReflection I figured it out, @ungap/custom-event
is conflicting with js-polyfills
's Event polyfill.
If I remove js-polyfills
, it works fine.
@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.
actually, this is pretty bad: https://github.com/inexorabletash/polyfill/blob/master/dom.js#L233
@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. https://github.com/inexorabletash/polyfill/pull/152
@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
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.
Another update, you're right, it's just something Webpack is doing. Here's a pen that breaks:
@davidmerrique can you please re-try anything you are doing with latest versions of any package mentioned in this thread? Thank you.
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.
Thank you ❤
Works perfectly. Even with js-polyfills
(I'm working on replacing that)
@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)
I started getting
in
disconnected
on this line:https://github.com/WebReflection/disconnected/blob/ed23b5dde33f62612632ff69863a9699a4ffa848/esm/index.js#L69
Something to do with using
CustomEvent
instead ofEvent
?https://github.com/WebReflection/regular-elements/blob/d7f1e6149e49314112c961d38761c1d7f6ef4bd3/esm/index.js#L28
Thanks