Safari/Babel/Webpack Const declarations are not supported in strict mode

Question

Safari is failing to load my React app with this line:

Const declarations are not supported in strict mode.

When I look at the line that's failing I'm seeing:

const Crypto = __webpack_require__(624)

This isn't something in my app so it must be injected by Webpack or another dependency.

Shouldn't Babel replace const with var?

Babel Dependencies

"babel": "~6.1.0",
"babel-core": "~6.2.0",
"babel-loader": "~6.2.0",
"babel-plugin-transform-runtime": "~6.1.0",
"babel-polyfill": "~6.2.0",
"babel-preset-es2015": "~6.1.0",
"babel-preset-react": "~6.1.0",
"babel-preset-stage-0": "~6.1.0",
"babel-runtime": "~6.2.0"

Babel Loader Config

{
  test: /\.js|\.jsx$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  query: {
    cacheDirectory: true,
    plugins: ['transform-runtime'],
    presets: ['es2015', 'react', 'stage-0']
  }
}

NOTE My app does work in Chrome.

Answer 1

You've excluded "node_modules" in babel-loader settings, so it doesn't process your external dependencies. This package you depend on probably is not tested for in-browser usage.

And, btw, babel won't replace your consts anyway unless you use "transform-es2015-block-scoping" plugin.

http://babeljs.io/docs/plugins/transform-es2015-block-scoping/

It's not included in "es2015" preset. There you have only "check-es2015-constants" plugin which just checks and validates const declarations.

The plugin which transforms consts into vars is called "transform-es2015-block-scoping" and it's included in "es2015" preset.