Support for legacy browsers

mhartington · October 27, 2022, 7:26pm

So we do have this bug logged for IE support here

bug: ES5 builds do not work in IE11

opened 12:50AM - 26 Aug 22 UTC

Bug: Validated

### Prerequisites - [X] I have read the [Contributing Guidelines](https://git…hub.com/ionic-team/stencil/blob/main/.github/CONTRIBUTING.md). - [X] I agree to follow the [Code of Conduct](https://github.com/ionic-team/stencil/blob/main/CODE_OF_CONDUCT.md). - [X] I have searched for [existing issues](https://github.com/ionic-team/stencil/issues) that already report this problem, without success. ### Stencil Version 2.17.4 ### Current Behavior When the [`buildEs5` flag](https://stenciljs.com/docs/config#buildes5) is turned on, the output in the `dist/esm-es5` folder throws an error when loaded in in IE11, and the components are not loaded. ### Expected Behavior When the [`buildEs5` flag](https://stenciljs.com/docs/config#buildes5) is turned on, the output in the `dist/esm-es5` folder is IE11-compatible, and all components load without any syntax errors ### Steps to Reproduce #### Setup 1. Create a fresh stencil project using `npm init stencil` 2. Add `buildEs5: true` to `stencil.config.js`. #### Option 1: Use the built-in dev script This is the easiest way to reproduce this 1. Run `npm start` 2. Visit the URL printed to the console in IE11 ![image](https://user-images.githubusercontent.com/9411156/186791548-8851298b-360f-4f9d-a515-5b23d0fb0641.png) #### Option 2: Use the build output in `dist/esm-es5` This is closer to how I'd expect consumers of a stencil-based library to encounter this 1. Run `npm run build` 2. Create an html file with a script tag that loads one of the files in `dist/esm-es5` 3. Load this file in IE11 ![image](https://user-images.githubusercontent.com/9411156/186791495-f9bb034f-75ef-4e48-9a22-6612bd28dd08.png) Here's a sample project I created using this method: https://github.com/steenburgh/stencil-ie11-test. Clone it and run an `npm install`. After that, you've got 2 options: 1. Run the stencil dev script, `npm start`, then load the app in IE11 2. Run the stencil build script, `npm run build`, then load `sample-consuming-app/index.html` in IE11. ### Code Reproduction URL https://github.com/steenburgh/stencil-ie11-test ### Additional Information I'm seeing `import` statements in the files inside `dist/esm-es5`, so I suspect something's not being transpiled properly. ![image](https://user-images.githubusercontent.com/9411156/186793497-ce660542-331b-4a7c-9baf-c852d195202f.png) This might be related to #3201?

But I would also consider not trying to support IE or any legacy browser.

Topic		Replies	Views
Support for IE11? ionic-v3	9	6528	October 23, 2019
FAQ: How do I enable polyfills for legacy browsers? Stencil faq	1	1042	October 26, 2022
Announcing Stencil v4.0.0 Stencil	0	556	June 26, 2023
My-lib.system.js issue in IE11 after 1.10.1 => 1.11.0 update Stencil	0	561	March 20, 2020
Prod-build not working in Edge, but --es5 does Stencil	1	733	July 19, 2021

Support for legacy browsers

Related topics