Dot notation property accessor in IE11

Question

I'm testing ReactJs app on IE 11.248.16299.0 and currently get this error:

"SCRIPT1010: Expected identifier" on line containing:

exports.default = assertString;

Now I know this error means that IE can not understand dot notation and if I would rewrite this line to:

exports['default'] = assertString;

it would work fine.

Using proper solution it is possible to solve this by supplying correct preset or plugin to Webpack which packages my app. However I've tried es2015, stage-0, babel-preset-env but couln't find any solutions or right combinations of config for this.

Btw, these syntax issues are actually in popular packages, like 'validator' or leaflet which I find weird that they don't work on IE11 even tho advertised as such. Hence, I figured, maybe there is something I have to do with packages or npm in particular?

in any case, main question is How should I configure my webpack to properly transpile in this case?

Current config:

const webpackConfig = {
devtool: 'source-map',
entry: ['babel-polyfill', './src/index.js'],
output: {
    filename: 'webapp-XXXXXXXXX-[git-revision-version].js',
    publicPath: '/',
    path: path.resolve(__dirname, outputDir.development)
},
stats: {
    // quiet: true
},
devServer: {
    // quiet: true,
    port: PORT_NUMBER
},
plugins: [
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify(process.env.NODE_ENV) || '"development"',
            CLIENT_VERSION: JSON.stringify(pkg.version) || '""'
        }
    }),
    new GitRevisionPlugin(),
    new HtmlWebpackPlugin({
        template: 'index.ejs'
    }),
    extractSass
],
module: {
    rules: [
        {
            test: /\.js$/,
            include: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules')],
            exclude: [
                /(bower_components)/,
                path.resolve(__dirname, 'node_modules/react-leaflet'),
                path.resolve(__dirname, 'node_modules/react-dom'),
                path.resolve(__dirname, 'node_modules/lodash')
            ],
            use: {
                loader: 'babel-loader',
                options: {
                    presets: [
                        'react',
                        [
                            'env',
                            {
                                targets: {
                                    browsers: ['last 2 versions']
                                }
                            }
                        ],
                        [
                            "es2015", {
                                "loose": false,
                                "modules": false
                            }
                        ],
                        'stage-0',
                    ],
                    plugins: [
                        'transform-class-properties',
                        'syntax-trailing-function-commas'
                    ]
                }
            }
        },
        {
            // images
            test: /\.(ico|jpe?g|png|gif)$/,
            use: {
                loader: 'file-loader',
                options: {
                    name: '../img/[name].[ext]'
                    // name: '[name].[ext]'
                }
            }
        },
        {
            test: /\.scss$/,
            use: extractSass.extract({
                use: [
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ],
                // use style-loader in development
                fallback: 'style-loader'
            })
        }
    ]
}

}

Answer 1

For those who will stumble on this later by any chance.

As @Pointy correctly pointed out, this error occurs due to reserved words usage. To solve this you have to add following plugins to your babelrc or webpack configs:

https://babeljs.io/docs/plugins/transform-es3-member-expression-literals/

and

https://www.npmjs.com/package/babel-preset-es2015

Frankly name "es3-member-expression-literals" for this issue is confusing for me as amateur web developer.

Also it is very possible you'll need this one as well:

https://babeljs.io/docs/plugins/transform-es3-property-literals/

this transforms reserved object properties names