showcase: DEV build not working in Internet Explorer due to "Syntax error" in polyfills.bundle.js

[christophercr]

I'm submitting a...

[X] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/NationalBankBelgium/stark/blob/master/CONTRIBUTING.md#got-a-question-or-problem

Current behavior

The Showcase app fails to start in Internet Explorer.

Expected behavior

The Showcase should run in any ever-green browser as well as in Internet Explorer.

Minimal reproduction of the problem with instructions

1. Run the app in DEV by executing the command npm run showcase
2. Open the Showcase in Internet Explorer
3. The application cannot start and just shows the "Loading" animation. An error is logged to the console:

SCRIPT1002: Syntax error
polyfills.81d1582f7b772e429277.bundle.js (288,21)

Going to the line of code from the polyfills bundle, the code causing the error is this line from the ansi-regex library:

module.exports = () => {     // ----> arrow function is not supported by IE
	const pattern = [
		'[\\u001B\\u009B][[\\]()#;?]*(?:(?:(?:[a-zA-Z\\d]*(?:;[a-zA-Z\\d]*)*)?\\u0007)',
		'(?:(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PRZcf-ntqry=><~]))'
	].join('|');

	return new RegExp(pattern, 'g');
};

What is the motivation / use case for changing the behavior?

Cross browser compatibility of Stark Showcase.

Environment

Angular version: 7.0.4
Stark version: 10.0.0-beta.1-2d38032


Browser:
- [X] IE version 11

[christophercr]

The issue is caused by this transitive dependencies on webpack-cli and webpack-dev-server:

• webpack-cli and webpack-dev-server require yargs v12.x.x
• yargs requires cliui v4.x
• cliui requires strip-ansi v4.x which is written in ES6 (dropped support for NodeJs 4)
• strip-ansi v4.x requires ansi-regex v3.x which is written in ES6 (dropped support for NodeJs 4)

[christophercr]

Apparently, strip-ansi and ansi-regex are now written in ES6 since they don't support NodeJs 4 anymore.
See chalk/strip-ansi#18 and chalk/ansi-regex#17

[christophercr]

Digging a bit more, the issue seems to be caused by transitive dependencies in @angular/cli as of version 7.1.0, again for strip-ansi v4.x and ansi-regex v3.x

[christophercr]

To solve this issue, we will use the babel-loader for Webpack to transpile to ES5 only certain libs and ONLY in DEV.

This is not necessary on PROD at all since the conflicting libs are from Webpack on DEV. On top of that, we use Typescript compiler targeting ES5 Javascript and also UglifyJS to minify ES5 code (throws an exception in case of ES6 code).