Fails to load in IE11 due to ES6 syntax

[iancamp]

Fails to load in IE11 due to ES6 syntax

[hueniverse]

You have to use webpack or something like it to adjust the code to the platforms you need to support. There is no one right answer here.

[ceisele-r]

@hueniverse we are experiencing the same error after updating from nes 7.0.3 to @hapi/nes 11.2.2 together with updating hapi from 18.1.0 to @hapi/hapi 18.4.0 and inert from 5.1.0 to @hapi/inert 5.2.2.
We have been using webpack before and after the update. Before, everything works in IE11 but after the update, the Arrow functions unfortunately are not transpiled.

Do you have any idea why this could be happening now after the update?
One thing we did was to apply the suggested fix mentioned in #294 (comment) because we ran in that issue. Could it be somehow related to this?

[iancamp]

I was able to get around this by adding babel-loader. See below.

Packages installed

    "@babel/core": "7.7.2",
    "@babel/polyfill": "7.7.0",
    "@babel/preset-env": "7.7.1",
    "babel-loader": "8.0.6"

babel.config.js

'use strict';

module.exports = function (api) {
    api.cache(true);

    const presets = [ '@babel/preset-env'];
    const plugins = [];

    return {
        presets,
        plugins
    };
}; 

Added this to my webpack.config.js

    module: {
        rules: [
            {
                test: /\.js$/,
                include: [ path.resolve('./node_modules/@hapi/nes') ],
                use: {
                    loader: 'babel-loader',
                    options: {
                        configFile: path.resolve('./babel.config.js')
                    }
                }
            }
        ]
    },

[ceisele-r]

@iancamp thank you. We have a similar setup, except that we do not use @babel/polyfill since it is deprecated.

I think I now proceeded some steps by adding @babel/plugin-transform-arrow-functions and including it as plugin to babel-loader:

use: {
          loader: "babel-loader",
          options: {
            presets: [
              [
                "@babel/preset-env",
                {
                  "useBuiltIns": "usage",
                  "corejs": 3,
                  "debug": true,
                  "targets": {
                    "chrome": "58",
                    "ie": "11"
                  }
                }
              ],
              ["@babel/preset-react"]
            ],
            plugins: [
              ...
              "@babel/plugin-transform-runtime",
              "@babel/plugin-transform-arrow-functions"
            ],
          }
        }

I am wondering whether adding @babel/plugin-transform-arrow-functions should be necessary or has any downsides.
At least it seems to somehow be working like this in IE11 again at the first look. I still have to see if it really works since I did quite some changes around this when trying to solve the issue and therefore a lot of stuff is mixed together now.

[iancamp]

Oh, didn't realize @babel/polyfill is deprecated. Thanks for the heads up! I don't think it's necessary for the workaround, anyway.