ES6 support

[eriknyk]

Hi,
Seems react-i18nliner is not supporting ES6 classes?

ERROR in ./src/client.js
Module parse failed: /Users/erik/project1/node_modules/babel-
loader/index.js!/Users/erik/project1/node_modules/react-i18nliner/webpack-
loader.js!/Users/erik/project1/src/client.js Line 5: Unexpected reserved word
You may need an appropriate loader to handle this file type.

| import React from 'react';

[jenseng]

Hi @eriknyk

react-i18nliner does ES6 if you swap out the default esprima-fb for babel-acorn. You need to create an i18nliner plugin with the following:

module.exports = function(i18nliner) {
  // get new ast types into ast-types
  require('babel-core/lib/babel/patch');

  var acorn = require("babel-core/lib/acorn");

  i18nliner.config.recastOptions = {
    esprima: {
      parse: function(src) {
        var comments = [];
        var tokens = [];

        var ast = acorn.parse(src, {
          plugins:     { jsx: true },
          ecmaVersion: 7,
          locations:   true,
          onComment:   comments,
          onToken:     tokens
        });

        ast.tokens = tokens;
        ast.comments = comments;

        return ast;
      }
    }
  };
};

You'll also need ast-types and babel-core in your package.json. I'm using the plugin above in an app successfully, with ast-types v0.7.6 and babel-core v5.3.3... it should hopefully work with other versions, but I haven't verified.

The plugin should be added to .i18nrc as outined here

Since esprima-fb is now deprecated, I plan on making babel-acorn the default, so this workaround should not be needed for too much longer. We can leave this ticket open for now, and I'll close it once I push a new version with the switch.

[eriknyk]

Thank you @jenseng I will try it!

[eriknyk]

Question please
do you think that babel-core should be set on "dependencies" section of packages.json?
or we can set as "devDependencies" ?

Regards.

[eriknyk]

Hi @jenseng
I've implemented an example using ES6 using babel and babel-loader

https://github.com/eriknyk/react-i18nliner/tree/master/examples/webpack_es6

but I'm getting the following error:

$ npm run build

> @ build c:\Users\erik\Documents\GitHub\react-i18nliner\examples\webpack_es6
> webpack

Hash: 6b04ff8e4c38d2fac6c6
Version: webpack 1.12.1
Time: 3658ms
          Asset    Size  Chunks             Chunk Names
build/bundle.js  842 kB       0  [emitted]  main
   [0] multi main 40 bytes {0} [built]
 [169] ./config/locales \.json$ 252 bytes {0} [built]
    + 361 hidden modules

ERROR in ./src/app.js
Module parse failed: c:\Users\erik\Documents\GitHub\react-i18nliner\examples\webpack_es6\node_modules\babel-loader\index.js!c:\Users\erik\Documents\GitHub\react-i18nliner\examples\webpack_es6\node_modules\react-i18nliner\webpack-loader.js!c:\Users\erik\Documents\GitHub\react-i18nliner\examples\webpack_es6\src\app.js Line 15: Unexpected token <
You may need an appropriate loader to handle this file type.
|   render: function() {
|     return (
|       <div>
|         <Header
|           updateLocale={this.changeLocale}
 @ ./src/index.js 3:0-16

I know that the babel setup is ok, because if I change the file webpack.config.js
removing i18nliner related things as follow, it build ok the budle.js

module.exports = {
  entry: [
    "./src/index.js"
  ],
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  module: {
    loaders: [
      { test: /\.(js|jsx)$/, loader: "babel-loader" },
      { test: /\.json$/, loader: "json-loader" }
    ]
  }
};

I will appreciate a lot your help.

Best Regards.

[jenseng]

i18nliner has (finally) moved to using babel/babylon, so the default behavior should be to support ES6/ES7