Pre-compile to JS from JSX

[joeyjmorales]

Hello,

When installing with npm the index.js is still in jsx format. I'd love to use it directly without having to compile it as a 3p lib within my application. Could you compile to JS as part of the build?

A bit new to react so if there is a better way I'd love to know!
Thanks.

[alex-dixon]

I was actually going to open an issue with the opposite concern. npm install gives me a js file, and I'm using gulp and Webpack. After adding the require in a JSX file and putting in the code for Dropzone component ,Webpack gave this error:

ERROR in ./~/react-dropzone/index.js
Module parse failed: /projectdir/node_modules/react-dropzone/index.js Line 73: Unexpected token <
You may need an appropriate loader to handle this file type.
| 
|     return (
|       <div className={className} style={style} onClick={this.onClick} onDragLeave={this.onDragLeave} onDragOver={this.onDragOver} onDrop={this.onDrop}>
|         <input style={{display: 'none' }} type='file' multiple ref='fileInput' onChange={this.onDrop} />
|         {this.props.children}
 @ ./client/pages/addapet/Form.jsx 14:15-40

Whether you get an error like this appears how you have React or React/Flux project set up. I fell into JSX to JS transpiling with gulp/webpack but there are other methods. Might be good to include instructions and/or accommodations as a result.

I ended up just copying the contents of index.js from the dropzone module into a new JSX file in my components folder and that seems to have worked.

[joeyjmorales]

Hi @alex-dixon that is the same problem I encountered. Perhaps misleading description given the file in node_modules has a .js but the code inside is in fact jsx format.

Also using gulp (transform jsx, browserify) workflow and my work around was similar, to copy the jsx (.js) file to my local components folder and transpile it to jsx as if it were my own component so my browserify "require" paths work properly.

What would work perfectly for my gulp worfklow is:

1.) Change the existing index.js file to a index.jsx.
2.) Transpile it from to js to jsx
3.) Check in the result.

This would allow use directly from node_modules without having to jsx transpile in my build. This removed hassles in copy/pasting that is necessary to respect the "require" paths needed for browserify.

Thanks for helping clarify!

[paramaggarwal]

Closing as merged PR by @BDiehr.