bug: ES5 builds do not work in IE11

[steenburgh]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

2.17.4

Current Behavior

When the buildEs5 flag 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 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

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

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.

This might be related to #3201?

[rwaskiewicz]

Thanks for the detailed reproduction @steenburgh! It's much appreciated. I was able to confirm this issue and will label it to be ingested into the team's backlog to be refined

[rwaskiewicz]

Closing, as Stencil no longer supports IE 11 as of Stencil v4. Thanks again!