ES5 fails for prod builds

[arby50]

A 'dev' build works when using FireFox 62 and Edge ("npm start") but a 'prod' build ("npm build") produces a blank page. In FF/Edge, the ion-nav tag is empty. The app displays in chrome. I can also duplicate this when running "npm start --prod". I can confirm via FF Dev tools that the es5 files are being produced and are loaded. I have been able to reproduce this using the bare Ionic PWA Toolkit as well as other PWA apps.

Expected behavior:
The prod build and minification process should produce ES5 compliant files that render in ES5-compliant browsers

Steps to reproduce:

using FF V63 or Edge (V42):
"npm start --prod" using the Ionic PWA toolkit:
https://github.com/ionic-team/ionic-pwa-toolkit

FYI:
Same issue occurred and was fixed a month ago:
#1132

I can get an ES2015 target to work, I just have to use the dev build with an ES5 flag set: 'npm run dev --es5'. 'dev' is defined in my package.json as "dev": "stencil build --dev --service-worker"
It only fails during production builds. Which I can work around, but I just dont get the minification (and whatever other) benefits come with a prod build.
According to stencil: Note that by default, ES5 builds and polyfills are enabled during production builds.

[NEO97online]

I'm experiencing the same problem on v0.15.0. Blank page on IE unless I run with "--dev --es5". Production builds not working on IE.

[adamdbradley]

I've tried the exact steps referenced but unable to not get Firefox, Edge or IE to not work. Is there anything going on that can help me recreate the issue?

[arby50]

I think it is a node.js version issue. On a machine with v6, I was unable to get any prod build. I tried a second machine with v7.8 and was able to get a single landing page to work, but blank pages for /profile et al. I upgraded the v6 machine to v10 and got a prod build.

[NEO97online]

@adamdbradley In my case, I am building my components and trying to use them in a React app. My other React components are rendering fine, but the stencil ones do not show up in IE11. They do show up in Chrome. It's a public repository if you want to try for yourself: https://github.com/silverstone/components

[NEO97online]

My www builds are actually working fine. Its the dist build, when used in a React or Angular app, which does not render in IE.

[adamdbradley]

@michaelauderer How can I recreate this issue? I've installed the silverstone components and used them in an external app and loaded them from IE11. What are some simple steps to create what you're seeing?

[NEO97online]

@adamdbradley Oh, we didn't publish the latest version yet, I should have mentioned that.

The way to recreate what I'm doing:

1. clone https://github.com/silverstone/components
2. npm install and npm run build to build the components
3. npm link to create a symlink to the package
4. create an external React app with create-react-app
5. npm link @silverstone/components to add to node_modules
6. follow instructions on stenciljs.com for framework integration
7. try using: <ss-button color="primary" type="raised">Click me</ss-button>
8. run the app on IE11. for me, the page is blank.

[adamdbradley]

Thanks for the heads up, should be fixed in the next release. Thanks