Hi,
Hope you are doing well.
I am trying to make my stenciljs library work with internet explorer.
I have followed the stencilj suggestions, by adding buildEs5: true,
in stencil.config.ts , along with many extras. My stencil.config.ts looks like this now :
link to documentation: Extras Config - Stencil
export const config: Config = {
buildEs5: true,
extras: {
cssVarsShim: true,
dynamicImportShim: true,
shadowDomShim: true,
safari10: true,
scriptDataOpts: true,
appendChildSlotFix: true,
cloneNodeFix: true,
slotChildNodesFix: true,
},
Still, the library is not working with IE.
Anyone out there to help me?
Thanks in advance.
So we do have this bug logged for IE support here
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.
1 Like