Babel-loader: Add support for [email protected]'s new config interface

[kohlmannj]

I'm submitting a feature request

Webpack Version: 2.1.0-beta.19

Babel Core Version: 6.13.2

Babel Loader Version: 6.2.4

Please tell us about your environment:
OSX 10.11.6
Node v6.2.2
NPM v3.10.5

• Current behavior:

Babel's recent release of v6.13.2 and corresponding 6.13.2 update to babel-preset-es2015 has resulted in the depreciation of babel-preset-es2015-webpack.

Along with with update, the Babel team has (apparently?) changed the interface for babel-preset-es2015. The Babel configuration referenced at this link shows how a developer can include an object literal within the presets array to indicate whether or not the es2015 preset should use loose native modules and/or transformation of ES6 modules, rather than installing and using a separate preset.

I'm not aware of any way to pass this new form of object literal to the preset module within babel-loader's current interface.

• Expected/desired behavior:

babel-loader perhaps needs an update to mirror the changes made in Babel 6.13.x, namely to support passing options to the es2015 preset within the loader configuration. Here's a possible way this could work using a query hash:

{
    test: /\.jsx?$/,
    loader: 'babel-loader',
    query: {
        presets: [
            'react',
            'es2015',
            {'modules': false}
        ]
    }
}

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem along with a gist/jsbin of your webpack configuration.

The above loader config doesn't work with [email protected], [email protected], or [email protected].

The above loader configuration currently produces the following error when used with [email protected]:

ReferenceError: [BABEL] /Users/kohlmannj/Sites/NYT/Tools/component-demo/src/index.js: Using removed Babel 5 option: foreign.modules - Use the corresponding module transform plugin in the `plugins` option. Check out http://babeljs.io/docs/plugins/#modules

If there is an existing way to pass these new config values to the es2015 preset, that'd obviously be great!

• What is the expected behavior?
  Expected behavior: by creating some valid loader configuration, babel-preset-es2015 correctly honors the modules and loose flags passed to it when Webpack invokes Babel via babel-loader.
• What is the motivation / use case for changing the behavior?
  The new object literal configuration interface for [email protected], and subsequent deprecation babel-preset-es2015-webpack is the primary motivation. (I'd guess that babel-preset-es2015-loose-native-modules will be deprecated soon as well.)

Thanks, Joe

[loganfsmyth]

That config format isn't quite right. You want

    presets: [
        'react',
        ['es2015', {'modules': false}]
    ]

so the options are grouped together with the preset they go with.

[kohlmannj]

@loganfsmyth Wonderful, thanks very much!

[blacksonic]

@loganfsmyth @kohlmannj Even with the grouped format, it is not working for me.
Is it deployed?
My configuration fails:

module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        query: {
          presets: [
            ['es2015', { modules: false }]
          ]
        }
      }
    ]
  }

[blacksonic]

my bad, the correct setup is this according to babel release notes (and it works)

presets: [
  ['es2015', { loose: true, modules: false }]
]

[buzzdan]

i've had the same problem and using babel ng annonate plugin solved it!
thanks everyone!

[maciej-gurban]

How would that work with having env, react and stage-1 preset? I've tried the following but with no success:

"presets": [
  ["env", {
    "targets": {
      "browsers": [
        "last 2 versions",
        "chrome >= 37",
        "safari >= 9"
      ]
    },
    "modules": false,
    "loose": true
  }],
  "react",
  "stage-1"
]

Error:

Using removed Babel 5 option: /foo-bar/package.json.modules - Use the corresponding module transform plugin in the `plugins` option. Check out http://babeljs.io/docs/plugins/#modules

Edit: the issue was unrelated to my config.