Closed eriknyk closed 7 years ago
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.
Thank you @jenseng I will try it!
Question please do you think that babel-core should be set on "dependencies" section of packages.json? or we can set as "devDependencies" ?
Regards.
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.
i18nliner has (finally) moved to using babel/babylon, so the default behavior should be to support ES6/ES7
Hi, Seems react-i18nliner is not supporting ES6 classes?