Use npm prepublish script to transform jsx

[TrySpace]

When I try:

 var mui = require('material-ui')

It throws this error on parsing:

Error: Parsing file C:\xxxx\node_modules\material-ui\src\js\dialog.jsx: Line 28: Unexpec ted token ...

This seems to be because there's some ECMAscript 6 stuff in there, but the documentation doesn't say/warn anything about this...

I had assumed npm would have no trouble with ES6, but it does.

Any solutions for this?

[gpbl]

I had also this issue. You should use the harmony option in reactify/jsx-loader when compiling your javascript. With webpack, for example, use ["jsx-loader?harmony"] as loader. This will transpile es6 into es5.

[TrySpace]

@gpbl: I'm using gulp and I just now tried: .pipe(react({harmony: true})) Like described here: https://github.com/sindresorhus/gulp-react

But it still throws the same error.

Also tried putting this in (like the example) require('node-jsx').install({harmony: true}) from: https://www.npmjs.com/package/node-jsx But that throws an Illegal return statement (only when I give the harmony option) while transforming (right when I start the gulp task)

Tried: .pipe(traceur()) also still chokes on parsing

[TrySpace]

So how do other people use this npm module, without any extra files & knowledge? Because I can NOT see any trace of parsing to es5 or any harmony flag in any of the gulpfiles included...

Also tried for browsify:

   .add(es6ify.runtime)
    .transform(es6ify)

[gpbl]

@TrySpace this seems related: https://github.com/sindresorhus/gulp-react/issues/21. I have no experience with gulp-react. Would passing { followRequires: true, harmony: true } work?

node-jsx is for requiring JSX files via node.js – it's not used for producing the client's js. Is the issue when compiling for the client?

You can see in browserify dependency in package.json for the docs project, that it includes reactify with es6 enabled. But I do agree it is confusing. @hai-cea wouldn't a compiled version work better? Not everyone uses harmony :-)

[TrySpace]

@gpbl Well, that partially helped, now it throws at enhanced-button.jsx: Line 37 which also has es6 syntax... I think we're in the right direction though.

[TrySpace]

Ok, so I fixed it by adding:

 "browserify": {
   "transform": [
     [
       "reactify",
       {
         "es6": true
       }
     ]
   ]
  }

to package.json

So, case closed

[ButuzGOL]

I think this should be added to documentation because I also spend some time to fix it

[DavidWells]

I had the same problem. Updating node-jsx to "0.12.4" and by passing in harmony to true fixed this issue

require("node-jsx").install({extension: '.jsx', harmony: true});

Great work on this library! Stellar!

[Timopheym]

@TrySpace hey, it does not work for me. i am generating code from gulp based on this configuration https://github.com/tcoopman/react-es6-browserify

var reactifyES6 = function(file) {
  return reactify(file, {'es6': true});
};

...

 bundler.transform(reactifyES6);

Does not work either

[ButuzGOL]

Take a look on my gulpfile https://github.com/DragonLegend/game/blob/master/public/gulpfile.js#L127 or do it like in example https://github.com/callemall/material-ui/blob/master/example/package.json#L5

[asvsfs]

i'm using grunt like this sample , but it's not working for me

browserify: {
    test: {
            src: 'src/js/main.js',
            dest: 'public/js/main.js',
            options: {
                transform: [
                    ["reactify", {"es6": true}]
                ]
            }
        }
    },

[gaearon]

IMO transforming should be done on the library's side, not consumer's.

[hai-cea]

Yep - I agree with @gaearon