Babel-loader: Babel 6 is out.

[ritz078]

An upgrade will be great.

[Azaeres]

+1

[rosko]

+1

[schovi]

+1

[shanecav]

+1

[eelkeh]

+1

[Couto]

Please stop with the +1 :)
It's the first thing I'll do tomorrow morning (aprox 8h from now)

[Couto]

Also any PR in the meantime is appreciated

[afc163]

+1

[shinnn]

@afc163 https://github.com/babel/babel-loader/issues/123#issuecomment-152368201

[Couto]

For the adventurous ones, you can test the develop branch:

devDependencies: {
  babel-loader: 'babel/babel-loader#develop'
}

Don't forget to install peerDependencies and plugins:

npm install babel-loader babel-core babel-preset-es2015

If people say that it's good, I'll make a release to master!

[malyw]

Hey @Couto
Just tried "babel/babel-loader#develop"- works good for me!

JS build: 2.6s -> 2.1s (~20% profit)
Thanks!

[msokk]

I wonder how will custom polyfilling look like in v6?
https://github.com/babel/babel-loader#custom-polyfills-eg-promise-library

[schovi]

Works fine too in https://github.com/schovi/webpack-chrome-extension

[MarianArlt]

Specified 'babel?optional[]=runtime&stage=0' in config, 6.0.0 throws me an error about loader options being unknown (worked fine before).

ERROR in ./app/index.jsx
Module build failed: ReferenceError: [BABEL] /Library/WebServer/Documents/yarsk.test/app/index.jsx: Unknown option: base.optional
    at Logger.error (/Library/WebServer/Documents/yarsk.test/node_modules/babel-core/lib/transformation/file/logger.js:43:11)
    at OptionManager.mergeOptions (/Library/WebServer/Documents/yarsk.test/node_modules/babel-core/lib/transformation/file/options/option-manager.js:244:18)
    at OptionManager.init (/Library/WebServer/Documents/yarsk.test/node_modules/babel-core/lib/transformation/file/options/option-manager.js:395:10)
    at File.initOptions (/Library/WebServer/Documents/yarsk.test/node_modules/babel-core/lib/transformation/file/index.js:191:75)
    at new File (/Library/WebServer/Documents/yarsk.test/node_modules/babel-core/lib/transformation/file/index.js:122:22)
    at Pipeline.transform (/Library/WebServer/Documents/yarsk.test/node_modules/babel-core/lib/transformation/pipeline.js:42:16)
    at transpile (/Library/WebServer/Documents/yarsk.test/node_modules/babel-loader/index.js:12:22)
    at Object.module.exports (/Library/WebServer/Documents/yarsk.test/node_modules/babel-loader/index.js:69:12)
 @ multi main

[malyw]

@MarianArlt runtime and stageparams are supposed to be removed.
Check e.g.: Quick guide: how to update Babel 5.x -> 6.x

[MarianArlt]

@malyw Thanks for the pointer, changed to 'babel?presets[]=es2015' and now compiles fine but throws a syntax error about react static propTypes.

ERROR in ./app/components/form/index.jsx
Module build failed: SyntaxError: /Library/WebServer/Documents/yarsk.test/app/components/form/index.jsx: Unexpected token (19:19)
  17 | // ES6 React Component:
  18 | export default class SurveyForm extends Component {
> 19 |   static propTypes = {
     |                    ^

Would this be because of a missing 'react' preset in babel6? There's es2015, react and stage-x as a preset option.

[t-hiroyoshi]

@MarianArlt transform-class-properties is included in preset-stage-1 so this is not preset-react's problem. See this http://babeljs.io/docs/plugins/preset-stage-1.

[Couto]

Hey everyone! babel-loader v6 is out. You can now install directly from npm.
Thanks everyone for the notice and testing :)

@malyw I've added a link to your upgrade guide, on the README.md. I hope you don't mind, if you do, just ping! :)

I'll leave this issue open a few more days, to collect feedback about problems that might arise.

[malyw]

Hey @Couto well done!
Just updated an article section regarding babel-loader version 👍

[dabowheel]

Two things:
1) I was confused at first because it wouldn't transpile unless I specified the preset. The readme didn't mention the preset was necessary to go from es2015 to es5.
2.) Installing babel-preset-es2015 takes a couple minutes on my machine. My npm version is 2.14.7. I assume that upgrading to npm 3.x would help because it wouldn't install multiple copies of the same dependencies.

[MichaelCereda]

I have an error similar to @MarianArlt

ERROR in ./src/app.jsx
Module build failed: SyntaxError: /<path>/app.jsx: Unexpected token (11:4)

 React.render(
> 11 |     <h1>Hello, world!</h1>,
     |     ^
  12 |     document.getElementById('app')
  13 | );

i tried everything but nothing seems to work, my current settings are

{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loaders: [ 'react-hot', 'babel?presets[]=es2015' ],
}

am i doing something wrong? should i downgrade for now? thanks

[zerkms]

@MichaelCereda es2015 preset does not compile jsx, there is a separated react one

[MichaelCereda]

Thanks @zerkms, do you mean 'babel-preset-react' and as settings

{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loaders: [ 'react-hot', 'babel?presets[]=react' ],
}

gives me

You may need an appropriate loader to handle this file type.
|
|
| import React from 'react';
|
| React.render(React.createElement(

triggered on the line of "React.render"
even if the content of the file is just

import React from 'react';

React.render(
    <h1>Hello, world!</h1>,
    document.getElementById('app')
);

probably i'm doing something wrong.. :S

[zerkms]

@MichaelCereda add multiple presets, one for ES2015, another for jsx :-)

[MichaelCereda]

Thanks again @zerkms, now it finally works, here's what i did.

{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loaders: [ 'react-hot', 'babel?presets[]=react&presets[]=es2015' ],
}

the order of the presets seems important.
I hope that this can help others

[GerryFudd]

I am encountering an issue similar to @MichaelCereda and I am attempting to implement his fix. I have

    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",

in my dependencies and

      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel', // requires babel-loader
        query: {
          presets: ['react', 'es2015'] // requires babel-preset-<name>
        }
      }

in my webpack.config.js. When I attempt to run webpack, I still get this error

ERROR in ./client/elements/log.js
Module build failed: SyntaxError: /Users/davidhasenjaeger/Wirestorm/projects/TwilioBeta/client/elements/log.js: Unexpected token (4:19)
  2 | 
  3 | export default class Log extends Component {
> 4 |   static propTypes = {
    |                    ^
  5 |     text: PropTypes.string.isRequired
  6 |   };
  7 | 

Is there anything else that I may have missed?

[GerryFudd]

All of the jsx is interpreted correctly. It is just the static propTypes that is causing errors.

[zerkms]

@GerryFudd static class fields are part of stage-1 preset

• https://github.com/tc39/ecma262
• https://github.com/jeffmo/es-class-fields-and-static-properties
• https://babeljs.io/docs/plugins/preset-stage-1/

[GerryFudd]

Thank you, @zerkms! It looks like the order of the presets is important here as well. I modified my dependencies to include

    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-1": "^6.5.0",

and my loader in webpack.config.js to include

      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel', // requires babel-loader
        query: {
          presets: ['react', 'es2015', 'stage-1'] // requires babel-preset-<name>
        }
      }

This compiles just fine now. Cheers, all!