Webpacker: Inline presets take precedence over .babelrc and it's not clear from the get-go.

[sergiotapia]

Using Webpacker 1.1 and a brand new Rails 5.0.2.

Here's my simple React component for testing purposes.

import React, { Component, PropTypes } from 'react'
import DayPicker, { DateUtils } from 'react-day-picker'
import 'react-day-picker/lib/style.css'

export default class Example extends Component {
  constructor(props) {
    super(props)
  }

  sayHello = () => {
    console.log("Hello")
  }

  render() {
    return (
      <p onClick={this.sayHello}>Working</p>
    )
  }
}
`

The error I get is:

21:21:01 hot.1  | ERROR in ./app/javascript/packs/components/example/example.js
21:21:01 hot.1  | Module build failed: SyntaxError: Missing class properties transform.
21:21:01 hot.1  |
21:21:01 hot.1  |   11 |   }
21:21:01 hot.1  |   12 |
21:21:01 hot.1  | > 13 |   sayHello = () => {
21:21:01 hot.1  |      |   ^

My .babelrc file looks like:

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

My package.json

{
  "dependencies": {
    *snip*
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-stage-2": "^6.22.0",
    "webpack-dev-server": "^2.4.2"
  }
}

Any ideas on how to make the class arrow functions working with Webpacker? It's like the stage-2 preset isn't being applied proper and I'm out of ideas.

Thanks for the help!

[sergiotapia]

To fix, I had to add the presets to the individual loader files, specifically.

// config/webpack/loaders/babel.js
module.exports = {
  test: /\.js(\.erb)?$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  options: {
    presets: [
      'es2015',
      'stage-2'
    ]
  }
}

// config/webpack/loaders/react.js
module.exports = {
  test: /\.(js|jsx)?(\.erb)?$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  options: {
    presets: [
      'es2015',
      'react',
      'stage-2'
    ]
  }
}

Now I can use the nice shorthand arrow class functions.

[gauravtiwari]

Oh yes, it's because we got inline presets so, it always takes precedence. Perhaps, we move this to .babelrc as it makes the configuration easier.

[sergiotapia]

@gauravtiwari I edited the issue title. I think .babelrc would be a great idea, all the babel presets I've read about online recommend using it via babelrc.

[JDutil]

Thumbs up since this bit me as well.

For people with slightly more complicated loader configurations, such as, in my case where we are mixing coffeescript and jsx in order to get things working I had to modify my loaders/coffee.js to be:

module.exports = {
  test: /\.coffee(\.erb)?$/,
  use: [
    {
      loader: 'jsx-loader?insertPragma=React.DOM'
    },
    {
      loader: 'babel-loader',
      options: {
        plugins: [
          'transform-class-properties',
          'transform-object-assign',
          'transform-object-rest-spread',
          'inline-react-svg'
        ],
        presets: [
          'es2015',
          'react',
          'stage-2'
        ]
      }
    },
    {
      loader: 'coffee-loader'
    },
    {
      loader: 'cjsx-loader'
    }
  ]
}

Note the order was very important as well, and I also had to modify my loaders/babel.js to remove the default options generated by the install scripts as that would break things as well:

module.exports = {
  test: /\.js(\.erb)?$/,
  exclude: /node_modules/,
  loader: 'babel-loader'
}

[imWildCat]

While ['env', {modules: false}] is set, it failed.

ERROR in ./app/javascript/packs/components/pages/GroupMessagePage/index.js
Module build failed: SyntaxError: Missing class properties transform.

   5 | export default class GroupMessagePage extends Component {
   6 | 
>  7 |     sayHello = () => {
     |     ^
   8 |         console.log("Hello")
   9 |     }
  10 | 

module.exports = {
    test: /\.(js|jsx)?(\.erb)?$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    options: {
        presets: [
            'es2015', 'react', 'stage-2',
            ['env', {modules: false}] // this line causes error when stage-2 enabled
        ]
    }
}

[gauravtiwari]

264 addresses this

[gauravtiwari]

Fixed by #291