CODEWITHSUNDEEP
javascriptwebpackecmascript-6babeljs
Jad S
Jad S

Reputation: 2995

Webpack outputting ES6 code despite ES2015 preset

I'm writing client-side react code with ES6 synthax and have been using webpack to transform into ES5 using Babel, and generate a bundle that I send to browser.

It works great on Chrome. However, I recently tried my bundle on Safari 9.x and it failed with : SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode. Upon closer inspection I noticed this code in the bundle.js was causing the error:

// customized for this use-case
const isObject = x =>
    typeof x === 'object' &&
    x !== null &&
    !(x instanceof RegExp) &&
    !(x instanceof Error) &&
    !(x instanceof Date);

I thought webpack was supposed to eliminate ES6 code (since I'm using the es2015 preset) so I'm surprised that a const and an arrow function were still in the bundle. Why is there ES6 code still in my bundle? Is there any way for me to get webpack to transform that into ES5?

Here's a snippet of my webpack.config.js that I thought would have done the job of removing this synthax but didn't:

module: {
  loaders: [{
    test: /\.jsx?/,
    include: APP_DIR,
    loader: 'babel-loader',
    query: {
      presets: ['es2015', 'react', 'stage-2'] //, 'react-hmre']
    }
  }

Upvotes: 1

Views: 392

Answers (1)

Jad S
Jad S

Reputation: 2995

After much head scratching and investigation it turned out that one node module, snakecase-keys, is built using ES6 synthax. Since my webpack is only targeting my static directory and not my node modules it did not get Babel'd

This fixed it:

module: {
      loaders: [{
        test: /\.jsx?/,
        // exclude: /(node_modules|bower_components)/,
        include: [APP_DIR, /node_modules\/snakecase-keys/],
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react', 'stage-2'] //, 'react-hmre']
        }
      }]
}

Upvotes: 1

Related Questions