Stencil: Building for production doesn't support IE11

[FedericoCarboni]

Stencil version:

 @stencil/core@^1.12.2

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

Building a stencil app for production won't support IE11 but dev builds using the --es5 flag do.

Expected behavior:

Production builds should support IE11.

Steps to reproduce:

Initialize a new Stencil app, run stencil build folder, serve the www directory. Check with IE11.
Try with dev mode run stencil build --dev --es5 --serve. Then check with IE11.

[stanislavprokopov]

I was able to trace the issue to this part if the build code:

var start = function() {
    var url = new URL('./p-e55ace99.system.js', resourcesUrl);
    System.import(url.href);
  };

the generated index.html has this part
<script type="module" data-resources-url="/build/"
so when this start script is executed it tries to execute this code
new URL('./p-e55ace99.system.js', '/build/');
And if you run it in the IE11 dev console you will get an error Invalid scheme
To fix this i changed data-resources-url to be a full url.
After that the starter component works.

[pju-]

Same issue here, I can not get the production build to run in IE 11.
It will fail silently (no console output).

[manucorporat]

can you provide a repo case? maybe just index.html?

[pju-]

Sure, here you go:
https://github.com/pju-/stencil-issue-2397

If you run

npm init stencil (and choose the app-package or the component-package)
cd your_directory
npm install
npm run build

that should give you the setup :)

I have included the build files, index.html and all.
Check here to see the offending line that is missing the needed absolute base URL.

This should fix it, I'm just not sure if generate-system.ts is a generated file.

[RaviDesai]

I'm having a slightly different problem with production builds in IE. Whenever I fire up a production build, and point IE at it, I get errors in the Console: Object doesn't support property or method 'assign' in ~dev-server in a line that looks like Te=Object.assign({},De, t.devServerConfig, n);

It appears this error may be the cause of other errors down the line as well: Later on when addGlobalStyle is called, a normalizeValue function further down the line encounters errors as well (it is given an undefined value that it chokes on).

[warapitiya]

Same issue as @RaviDesai.

yarn start --es5 throws an error on IE 11. assign is not define

[RafaelKr]

@warapitiya Probably you wanted to mention RaviDesai instead of me?

[flobacher]

@manucorporat
please take a look at the mentioned PR https://github.com/ionic-team/stencil/pull/2410
This fixes the problem that still exists in @stencil/core@14 and totally breaks IE11.
It is a really small change and would bring back IE11 compatibility.
Thank you very much for your hard work!!!