reactify: Reactify doesn't convert JSX to JS for modules in node_modules

Hi,

I’m using reactify, and tried the following with versions 0.11.0, 0.12.0, 0.13.0, 0.13.1, 0.14.0 and Browserify 3.31.2, 4.2.3, 5.13.1 and 6.2. Almost all combinations have been tested, but mostly reactify 0.14.0 with all aforementioned versions of Browserify.

The problem : I’ve developped a React component that is common to several sites, so I decided to share it by publishing it to our internal GitLab. The module ends up in /node_modules. Since then, either compilation fails because of a Parse Error, of it fails silently and the JSX of the component isn’t transformed in the end. Before sharing it (and therefore putting the module into node_modules), the exact same code was in my local hierarchy of folder and it worked perfectly fine.

Steps to reproduce

I’ve managed to create a minimal test case that exhibits the problem.

toto.js // Main file for my test
package.json // Contains alias to the browserify build command
node_modules/
--  toto/  // React component shared
------  index.js // Entry point
------  package.json // Contains the react dependency only

toto.js :

var toto = require("toto");

package.json :

"scripts": {
  "toto": "browserify -t reactify toto.js -o toto-out.js"
},
"dependencies": {
  "browserify": "6.2.0",
  "reactify": "https://github.com/andreypopp/reactify/archive/v0.14.0.tar.gz"
}

node_modules/toto/index.js :

/** @jsx React.DOM */
"use strict";

var React = require("react");

var Toto = React.CreateClass({
    render: function() {
        return ( <h1>TOTO</h1> );
    }
});

node_modules/toto/package.json :

{
  "name": "toto",
  "version": "0.0.0",
  "main": "index.js",
  "dependencies": {
    "envify": "~1.2.1",
    "react": "~0.9.0"
  }
}

Case 1 : compilation fails

The error happens with Browserify 3.31.2. When I type npm run toto, the following error happens :

╰─$ npm run toto

> my-project@0.0.0 toto /SOME/PATH/
> browserify -t reactify toto.js -o toto-out.js

Error: Parsing file /SOME/PATH/node_modules/toto/index.js: Line 8: Unexpected token <

npm ERR! my-project@0.0.0 toto: `browserify -t reactify toto.js -o toto-out.js`
npm ERR! Exit status 1
...

The line 8 corresponds to the first occurence (and only here) of JSX in the React component (<h1>TOTO</h1>).

Case 2 : compilation fails silenlty

This happens with any version of Browserify >= 4, even the latest 6.2.0. npm run toto exits succesfully, but the JSX isn’t compiled at all so the code fails in the browser with a syntax error. In toto-out.js I can see it :

},{}],2:[function(require,module,exports){
/** @jsx React.DOM */
"use strict";

var React = require("react");

var Toto = React.CreateClass({
    render: function() {
        return ( <h1>TOTO</h1> );
    }
});

},{"react":132}],3:[function(require,module,exports){

** Hints **

The error message comes from module-deps. It’s supposed to execute any transform before parsing the file, as explained here. In case 1, it’s like the transform isn’t executed at all or registered to execute after parsing, hence the error. In case 2, it’s like it’s executed but not written to disk, not sure exactly. I tried debugging but I don’t have time to dive into the Browserify stack in details, and I’m not sure where to start. My temporary workaround will be to transform the JSX upfront so that I require a normal JS file.

I hope the report was detailed enough so you can have a look. I’m not even sure it’s related to reactify or module-deps. If I’m wrong I’d be happy to recreate the issue in the appropriate location.