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

[logandhead]

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

Const declarations are not supported in strict mode.

This bug occurred after the latest release.

[Marsup]

We're using const for a while now, last release certainly didn't break your app. When did it work last ? What are you doing to compile it ?

[lokhmakov]

On iOS 9.0.2 / Safari we have:

SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode.

main.js:

import 'babel-polyfill';
require('joi');

.babelrc

{
  "presets": ["es2015", "react", "stage-0"]
}

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'cheap-source-map',
  entry: [
    'webpack-hot-middleware/client',
    path.join(__dirname, 'src', 'main')
  ],
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development')
    })
  ],
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loaders: ['react-hot', 'babel-loader'],
      exclude: /(node_modules|bower_components)/
    }]
  },
  node: {
    net: 'empty',
    dns: 'empty'
  }
};

[Marsup]

Well of course if you're excluding all node_modules that's not going to work.

[lokhmakov]

As you see in this configuration hot-loaders used for loading modules.

With react-hot-loader exclude node_modules is normal.

This configuration work on Windows, MAC, but not on iOS / Safari with Joi.

Without Joi all project works, that have react, redux, material-ui, socket.io and many other libs in node_modules.

[lokhmakov]

I sit with iOS remove debugger and found that problem that joi, hoek, isemail, topo does not work on iOS in strict mode.

After that I think babel compilation with es2015 preset helps.

All works normal after:

mv node_modules/joi/lib/ node_modules/joi/src/
babel -d node_modules/joi/lib/ node_modules/joi/src/

mv node_modules/hoek/lib/ node_modules/hoek/src/
babel -d node_modules/hoek/lib/ node_modules/hoek/src/

mv node_modules/isemail/lib/ node_modules/isemail/src/
babel -d node_modules/isemail/lib/ node_modules/isemail/src/

mv node_modules/topo/lib/ node_modules/topo/src/
babel -d node_modules/topo/lib/ node_modules/topo/src/

May be move joi/lib to joi/src and add to package.json script:

    "compile": "rimraf lib && babel -d lib/ src/"

And compile it before publish in npm.

[Marsup]

Use https://www.npmjs.com/package/joi-browser if you have difficulties configuring webpack properly.

[lokhmakov]

joi-browser does not updates. Thanks already see it.

[Marsup]

It doesn't do what ?

[lokhmakov]

For my needs do all what I want! ) But I like to use last versions of packages

[Marsup]

Then read and learn from their config, because it works.