Support for IE11

[dcapilla]

I am trying to use ReactShadow on IE11 but it doesn't seem to work. I get the following error in console:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 
You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check your code at index.tsx:55.

Line 55 contains the closing tag of the shadow root this:

<shadowRoot.section>
  ...
</shadowRoot.section>

Are there any plans to support IE11 in the future or does anybody know how to fix this? I am using webcomponentsjs, proxy-polyfill and other polyfills for explorer, but that doesn't seem to fix the issue.

Thanks

[aliblackwell]

Hi @dcapilla, I had the same issue. Fixed it by npm installing [email protected]. Version 17 uses a Proxy which isn't supported by IE11. I messed around for ages trying to polyfill Proxy and then realised I could just use an older version.

Finally, rather than attempt to polyfill Shadow Dom for IE11, I ended up with the following wrapper component that detects support for attachShadow and only serves the ShadowDOM component if it's there:

import React from 'react';
import ShadowDOM from 'react-shadow';

function ShadowDomFactory(props) {
    function shouldUseShadowDom() {
        return typeof document.body.attachShadow === 'function';
    }

    return (
        <>
            {shouldUseShadowDom() ? (
                <ShadowDOM>{props.children}</ShadowDOM>
            ) : (
                <div>{props.children}</div>
            )}
        </>
    );
}

export default ShadowDomFactory;

Hope this helps!

[Wildhoney]

Thanks @aliblackwell

We had a pull request a while ago that added support for polyfilling Proxy.

[marijnbent]

So what is the current workflow to add compatibility for older browsers? In an older issue, backwards compatibility was added #(30), but is removed since 17?

[Wildhoney]

Does the polyfill referenced in #30 not work any more @marijnbent? The only other thing we had in the older version was it supported an older versions of shadow boundaries (v0), which this one doesn't. The polyfill should handle that difference perfectly fine itself.