SyntaxError: Use of reserved word 'let' in strict mode

[mildrenben]

I recently upgraded to React 16 and added the PropTypes package, and now my tests won't run at all with the following error message:

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  SyntaxError: Use of reserved word 'let' in strict mode
  at webpack:///~/chai-as-promised/lib/chai-as-promised.js:3:0 <- test-bundler.js:21772

These are the project dependencies:

"dependencies": {
    "babel-core": "6.17.0",
    "babel-loader": "6.2.5",
    "babel-plugin-rewire": "1.1.0",
    "babel-plugin-transform-runtime": "6.15.0",
    "babel-polyfill": "6.23.0",
    "babel-preset-es2015": "6.14.0",
    "babel-preset-react": "6.11.1",
    "babel-preset-stage-0": "6.3.13",
    "babel-runtime": "6.11.6",
    "better-npm-run": "0.0.13",
    "compression": "1.6.2",
    "css-loader": "0.26.0",
    "cssnano": "3.7.4",
    "debug": "2.2.0",
    "deepmerge": "1.3.2",
    "eventsource-polyfill": "0.9.6",
    "extract-text-webpack-plugin": "1.0.0",
    "file-loader": "0.9.0",
    "file-saver": "1.3.3",
    "fs-extra": "1.0.0",
    "history": "3",
    "html-loader": "0.4.5",
    "html-webpack-plugin": "2.22.0",
    "imports-loader": "0.7.0",
    "ip": "1.1.2",
    "json-loader": "0.5.4",
    "json2csv": "3.7.3",
    "jspdf": "1.3.5",
    "karma-firefox-launcher": "1.0.1",
    "lodash": "4.17.4",
    "moment": "2.17.1",
    "normalize.css": "5.0.0",
    "numeral": "2.0.4",
    "postcss-cssnext": "2.9.0",
    "postcss-import": "9.1.0",
    "postcss-inline-svg": "2.3.0",
    "postcss-loader": "1.1.0",
    "postcss-modules": "0.6.3",
    "postcss-simple-vars": "3.0.0",
    "promise-polyfill": "6.0.2",
    "prop-types": "15.6.0",
    "react": "16.1.1",
    "react-datepicker": "0.56.0",
    "react-dom": "16.1.1",
    "react-modal": "3.1.2",
    "react-moment-proptypes": "1.3.0",
    "react-redux": "5.0.6",
    "react-router": "3",
    "react-router-redux": "4",
    "react-router-scroll": "0.4.2",
    "react-select": "1.0.0-rc.10",
    "react-stickynode": "1.4.0",
    "redux": "3.7.0",
    "redux-devtools-extension": "2.13.0",
    "redux-form": "7.1.2",
    "redux-form-saga": "0.1.0",
    "redux-persist": "4.8.0",
    "redux-responsive": "4.1.1",
    "redux-saga": "0.15.1",
    "rimraf": "2.5.4",
    "sinon-stub-promise": "4.0.0",
    "style-loader": "0.13.1",
    "svg-sprite-loader": "0.2.0",
    "uid": "0.0.2",
    "url-loader": "0.5.7",
    "webpack": "1.12.14",
    "whatwg-fetch": "2.0.3",
    "x2js": "3.1.1",
    "xlsx": "0.11.1",
    "yargs": "6.3.0"
  },
  "devDependencies": {
    "babel-eslint": "7.1.0",
    "babel-plugin-istanbul": "next",
    "chai": "4.1.2",
    "chai-as-promised": "7.1.1",
    "chai-enzyme": "0.8.0",
    "cheerio": "0.22.0",
    "codecov": "1.0.1",
    "concurrently": "3.4.0",
    "deep-freeze": "0.0.1",
    "enzyme": "3.2.0",
    "eslint": "3.0.1",
    "eslint-config-standard": "6.0.0",
    "eslint-config-standard-react": "4.0.0",
    "eslint-plugin-babel": "4.0.0",
    "eslint-plugin-promise": "3.0.0",
    "eslint-plugin-react": "6.0.0",
    "eslint-plugin-standard": "2.0.0",
    "express": "4.14.0",
    "json-server": "0.9.4",
    "karma": "1.7.1",
    "karma-chrome-launcher": "2.2.0",
    "karma-coverage": "1.1.1",
    "karma-mocha": "1.3.0",
    "karma-mocha-reporter": "2.2.5",
    "karma-phantomjs-launcher": "1.0.4",
    "karma-webpack-with-fast-source-maps": "1.10.2",
    "mocha": "4.0.1",
    "nodemon": "1.10.2",
    "phantomjs-prebuilt": "2.1.16",
    "querystring": "0.2.0",
    "redbox-react": "1.5.0",
    "redux-mock-store": "1.2.2",
    "sinon": "2.0.0-pre",
    "sinon-chai": "2.8.0",
    "webpack-bundle-size-analyzer": "2.6.0",
    "webpack-dev-middleware": "1.6.1",
    "webpack-hot-middleware": "2.12.2",
    "webpack-sources": "1.0.2"
  }

There is another error further up, so it's possible this is the cause:

ERROR in ./~/chai-enzyme/build/ReactTestWrapper.js
Module not found: Error: Cannot resolve module 'enzyme/build/react-compat' in /Users/MYNAME/git/MYPROJECT/node_modules/chai-enzyme/build
 @ ./~/chai-enzyme/build/ReactTestWrapper.js 9:19-55

This is the karma.config.js:

const argv = require('yargs').argv
const project = require('./project.config')
const webpackConfig = require('./webpack.config')
const debug = require('debug')('app:config:karma')

debug('Creating configuration.')
const karmaConfig = {
  basePath : '../', // project root in relation to bin/karma.js
  files    : [
    'node_modules/babel-polyfill/dist/polyfill.js',
    {
      pattern  : `./test-bundler.js`,
      watched  : false,
      served   : true,
      included : true
    }
  ],
  singleRun     : !argv.watch,
  frameworks    : ['mocha'],
  reporters     : ['mocha'],
  preprocessors : {
    [`./test-bundler.js`] : ['webpack']
  },
  browsers : ['PhantomJS'],
  webpack  : {
    devtool : 'cheap-module-source-map',
    resolve : Object.assign({}, webpackConfig.resolve, {
      alias : Object.assign({}, webpackConfig.resolve.alias, {
        sinon : 'sinon/pkg/sinon.js'
      })
    }),
    plugins : webpackConfig.plugins,
    module  : {
      noParse : [
        /\/sinon\.js/
      ],
      loaders : webpackConfig.module.loaders.concat([
        {
          test   : /sinon(\\|\/)pkg(\\|\/)sinon\.js/,
          loader : 'imports?define=>false,require=>false'
        }
      ])
    },
    // Enzyme fix, see:
    // https://github.com/airbnb/enzyme/issues/47
    externals : Object.assign({}, webpackConfig.externals, {
      'react/addons'                   : true,
      'react/lib/ExecutionEnvironment' : true,
      'react/lib/ReactContext'         : 'window'
    }),
    sassLoader : webpackConfig.sassLoader,
    postcss : webpackConfig.postcss
  },
  webpackMiddleware : {
    noInfo : true
  },
  coverageReporter : {
    reporters : project.coverage_reporters
  },
  mochaReporter: {
    showDiff: true
  }
}

if (project.globals.__COVERAGE__) {
  karmaConfig.reporters.push('coverage')
  karmaConfig.webpack.module.preLoaders = [{
    test    : /\.(js|jsx)$/,
    include : new RegExp(project.dir_client),
    exclude : /node_modules/,
    loader  : 'babel',
    query   : Object.assign({}, project.compiler_babel, {
      plugins : (project.compiler_babel.plugins || []).concat('istanbul')
    })
  }]
}

module.exports = (cfg) => cfg.set(karmaConfig)

Anyone have any ideas as to why this isn't working now?

[domenic]

https://github.com/domenic/chai-as-promised#browsernode-compatibility

[micheletedeschi]

"let" keyword is not es5 and the problem is that a module in a node_modules will not compiled by wepack.

To solve the problem you need to add a polyfill or compile chai as promised with webpack