Issue with building for IE11

[dan2k3k4]

I have recently upgraded my yarn dependencies which also involved upgrading to Storybook 6. However I noticed the built JS no longer works for IE11. It seems that it no longer transpiles arrow functions.

I run my build script which does:
cross-env NODE_ENV=production webpack --config storybook/webpack.config.js --mode production

I then try to verify if my built JS file works for ES5 using es-check:
es-check es5 storybook/dist/scripts.js

However I get an error:

ES-Check: there were 1 ES version matching errors.

          ES-Check Error:
          ----
          · erroring file: storybook/dist/scripts.js
          · error: SyntaxError: Unexpected token (2:2)
          · see the printed err.stack below for context
          ----

          SyntaxError: Unexpected token (2:2)

When I check line 2, position 2 in the storybook/dist/scripts.js file, I see an arrow function: (()=>{var e=

Part of the package.json to show babel-* related modules:

    "@babel/cli": "^7.12.1",
    "@babel/core": "^7.12.3",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/plugin-proposal-decorators": "^7.12.1",
    "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
    "@babel/plugin-transform-arrow-functions": "^7.12.1",
    "@babel/plugin-transform-runtime": "^7.12.1",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.1",
    "@babel/preset-typescript": "^7.12.1",
    "@webcomponents/webcomponentsjs": "^2.5.0",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.1.0",
    "core-js": "^3.6.5",

Here's my webpack.config.js

// Webpack configuration.
module.exports = {
  mode: 'development',
  entry: {
    scripts: './storybook/scripts.ts',
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  resolve: { extensions: ['.ts', '.js'] },
  // ... Plugins removed for example
  module: {
    rules: [
      {
        test: /\.(ts|js)$/,
        exclude: /node_modules|@babel(?:\/|\\{1,2})runtime|core-js/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                ['@babel/preset-typescript'],
                [
                  '@babel/preset-env',
                  {
                    corejs: false,
                    useBuiltIns: false,
                    targets: {
                      ie: '11',
                    },
                  },
                ],
              ],
              plugins: [
                ['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }],
                ['@babel/plugin-proposal-class-properties', { loose: true }],
                '@babel/plugin-proposal-object-rest-spread',
                ['@babel/plugin-transform-arrow-functions', { spec: true }],
              ],
            },
          },
        ],
      },
      // Other rules for CSS / Assets
    ],
  },
};

And the contents of the entry scripts.ts file:

// Globally add web components polyfills.
import 'core-js/stable';
import 'regenerator-runtime/runtime';
import '@webcomponents/webcomponentsjs/webcomponents-bundle';
import 'lazysizes';
import './styles.css';

// @ts-ignore
const components = require.context('./twig', true, /\/index\.(ts|js)$/);

// @ts-ignore
components.keys().forEach(filename => components(filename));

EDIT:
Here's a minimal project setup which is not building for ES5:
https://github.com/dan2k3k4/es5-minimal-project

[dan2k3k4]

Added a minimal project setup: https://github.com/dan2k3k4/es5-minimal-project

[nicolo-ribaudo]

Could you also commit the dist folder? 🙏

[dan2k3k4]

@nicolo-ribaudo added

[AjayPoshak]

1. First of all, I ran this command to figure out which of your dependencies publish ES6.
   npx are-you-es5 check ./

2. Then in webpack configuration on line no 18, I modified the exclude option to stop excluding the packages which publish ES6.
   exclude: [/node_modules\/(?!(twig|twig-drupal-filters|lit-html|lit-element)\/).*/],

3. Still there were arrow functions in the dist/scripts.js. Upon some research, I found out that it was webpack's boilerplate code, which contains the arrow functions. So I downgraded the webpack to version 4.41.5 [lastest previous major version I found].

And it worked. I believe there must be configuration in webpack to turn off arrow functions in webpack's runtime code, but I haven't had time to explore it.

EDIT::
I found out that by adding target: ["web", "es5"], in webpack5, it would generate its boilerplate code in ES5. 🚀

[dan2k3k4]

Oh wow thanks @AjayPoshak that fixed it:
https://github.com/dan2k3k4/es5-minimal-project/commit/ef95df7bf996e275c3a099025b0390559a3fc7ec

diff --git a/webpack.config.js b/webpack.config.js
index 1e7358f..53c1373 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -6,6 +6,7 @@ module.exports = {
   entry: {
     scripts: './scripts.ts',
   },
+  target: ['web', 'es5'],
   output: {
     filename: '[name].js',
     path: path.resolve(__dirname, 'dist'),
@@ -16,7 +17,7 @@ module.exports = {
     rules: [
       {
         test: /\.(ts|js)$/,
-        exclude: /node_modules/,
+        exclude: /node_modules\/(?!(twig|twig-drupal-filters|lit-html|lit-element)\/).*/,
         use: [
           {
             loader: 'babel-loader',

Then I ran es-check es5 dist/scripts.js again to verify:

› yarn run es-check es5 dist/scripts.js
yarn run v1.22.5
$ /es5-minimal-project/node_modules/.bin/es-check es5 dist/scripts.js
ES-Check: there were no ES version matching errors!  🎉
✨  Done in 0.64s.

[suhanw]

do you think webpack 5 still using arrow functions in runtime code, ignoring the ie: '11' target is a bug? it also threw me off