IE 11 support

[mgordic]

Hi,

Does it works in IE 11?

I tried to add some polyfills, but it's not working at all in IE11 (it's working offcourse in chrome).

Any ideas?

Thank you
Marko

[SimonHoiberg]

Hi Marko

Thank you for your interest in create-react-web-component.

Unfortunately, IE 11 is not supported in this setup.
There is a critical step occurring behind the scenes that require ES6 Proxies in order to create a shadow root.

Proxy is not supported in IE 11, and according to Babel, this cannot be transpiled or polyfilled:

Due to the limitations of ES5, Proxies cannot be transpiled or polyfilled. See support in various JavaScript engines.

IE 11 has not been updated since January 12, 2016, and will stop support entirely after the beginning of 2020.
Creating a version of create-react-web-component that would support IE 11 would be a huge task with a lot of hacky workarounds, and it is unfortunately not something that I have any plans for at the moment.

[SimonHoiberg]

There has been added a fix to the issue with Proxies.
Components can now render in IE 11 🙂

However, there can still occur some buggy behavior in IE11, and some precautions are still expected to be made, in order to use this for IE in production.

[mgordic]

Hi @silind ,

Thank you for update :)

I found a way to make it works in IE11. However, document mode for my site is set to IE10, so it's actually not working because there are no IE10 polyfills...

Any ideas...? :(

[SimonHoiberg]

In order to make it work in IE11, you now simply include these polyfills in index file:

// import polyfills for ie 11
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only';
import 'proxy-polyfill';

import { ReactWebComponent } from 'create-react-web-component';
import { componentAttributes, componentProperties } from './componentProperties';
import App from './App';

ReactWebComponent.setAttributes(componentAttributes);
ReactWebComponent.setProperties(componentProperties);
ReactWebComponent.render(App, 'the-component');

You may also want to add IE11 to browserlist under development in package.json, in order to see your component in IE11 during development.

Regarding IE10, I do not know if this will work.
My honest suggestions would be to have your site stop supporting any IE version below 11, if anyhow possible.