Skip to content
This repository has been archived by the owner on Jan 24, 2020. It is now read-only.

IE 11 support #3

Closed
mgordic opened this issue Oct 19, 2019 · 4 comments · Fixed by #5
Closed

IE 11 support #3

mgordic opened this issue Oct 19, 2019 · 4 comments · Fixed by #5
Labels
enhancement New feature or request

Comments

@mgordic
Copy link

mgordic commented Oct 19, 2019

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
Copy link
Owner

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 SimonHoiberg added the wontfix This will not be worked on label Oct 21, 2019
@SimonHoiberg SimonHoiberg added enhancement New feature or request and removed wontfix This will not be worked on labels Nov 7, 2019
@SimonHoiberg
Copy link
Owner

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
Copy link
Author

mgordic commented Nov 7, 2019

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
Copy link
Owner

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants