{"action":"created","issue":{"url":"https://api.github.com/repos/andreypopp/reactify/issues/20","labels_url":"https://api.github.com/repos/andreypopp/reactify/issues/20/labels{/name}","comments_url":"https://api.github.com/repos/andreypopp/reactify/issues/20/comments","events_url":"https://api.github.com/repos/andreypopp/reactify/issues/20/events","html_url":"https://github.com/andreypopp/reactify/issues/20","id":46911709,"number":20,"title":"Reactify doesn't convert JSX to JS for modules in node_modules","user":{"login":"DjebbZ","id":77278,"avatar_url":"https://avatars.githubusercontent.com/u/77278?v=3","gravatar_id":"","url":"https://api.github.com/users/DjebbZ","html_url":"https://github.com/DjebbZ","followers_url":"https://api.github.com/users/DjebbZ/followers","following_url":"https://api.github.com/users/DjebbZ/following{/other_user}","gists_url":"https://api.github.com/users/DjebbZ/gists{/gist_id}","starred_url":"https://api.github.com/users/DjebbZ/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/DjebbZ/subscriptions","organizations_url":"https://api.github.com/users/DjebbZ/orgs","repos_url":"https://api.github.com/users/DjebbZ/repos","events_url":"https://api.github.com/users/DjebbZ/events{/privacy}","received_events_url":"https://api.github.com/users/DjebbZ/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":15,"created_at":"2014-10-27T14:31:41Z","updated_at":"2015-02-22T07:53:10Z","closed_at":"2014-10-27T16:34:26Z","body":"Hi,\r\n\r\nI'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.\r\n\r\nThe 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.\r\n\r\n**Steps to reproduce**\r\n\r\nI've managed to create a minimal test case that exhibits the problem.\r\n\r\n```\r\ntoto.js // Main file for my test\r\npackage.json // Contains alias to the browserify build command\r\nnode_modules/\r\n--  toto/  // React component shared\r\n------  index.js // Entry point\r\n------  package.json // Contains the react dependency only\r\n```\r\n\r\n*toto.js* :\r\n\r\n``` javascript\r\nvar toto = require(\"toto\");\r\n```\r\n\r\n*package.json* :\r\n\r\n``` json\r\n\"scripts\": {\r\n  \"toto\": \"browserify -t reactify toto.js -o toto-out.js\"\r\n},\r\n\"dependencies\": {\r\n  \"browserify\": \"6.2.0\",\r\n  \"reactify\": \"https://github.com/andreypopp/reactify/archive/v0.14.0.tar.gz\"\r\n}\r\n```\r\n\r\n*node_modules/toto/index.js* :\r\n\r\n``` javascript\r\n/** @jsx React.DOM */\r\n\"use strict\";\r\n\r\nvar React = require(\"react\");\r\n\r\nvar Toto = React.CreateClass({\r\n    render: function() {\r\n        return ( <h1>TOTO</h1> );\r\n    }\r\n});\r\n```\r\n\r\n*node_modules/toto/package.json* :\r\n\r\n``` json\r\n{\r\n  \"name\": \"toto\",\r\n  \"version\": \"0.0.0\",\r\n  \"main\": \"index.js\",\r\n  \"dependencies\": {\r\n    \"envify\": \"~1.2.1\",\r\n    \"react\": \"~0.9.0\"\r\n  }\r\n}\r\n```\r\n\r\n**Case 1 : compilation fails**\r\n\r\nThe error happens with Browserify 3.31.2. When I type `npm run toto`, the following error happens :\r\n\r\n``` shell\r\n╰─$ npm run toto\r\n\r\n> my-project@0.0.0 toto /SOME/PATH/\r\n> browserify -t reactify toto.js -o toto-out.js\r\n\r\nError: Parsing file /SOME/PATH/node_modules/toto/index.js: Line 8: Unexpected token <\r\n\r\nnpm ERR! my-project@0.0.0 toto: `browserify -t reactify toto.js -o toto-out.js`\r\nnpm ERR! Exit status 1\r\n...\r\n```\r\n\r\nThe line 8 corresponds to the first occurence (and only here) of JSX in the React component (`<h1>TOTO</h1>`).\r\n\r\n**Case 2 : compilation fails silenlty**\r\n\r\nThis 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 : \r\n\r\n``` javascript\r\n},{}],2:[function(require,module,exports){\r\n/** @jsx React.DOM */\r\n\"use strict\";\r\n\r\nvar React = require(\"react\");\r\n\r\nvar Toto = React.CreateClass({\r\n    render: function() {\r\n        return ( <h1>TOTO</h1> );\r\n    }\r\n});\r\n\r\n},{\"react\":132}],3:[function(require,module,exports){\r\n```\r\n\r\n** Hints **\r\n\r\nThe error message comes from module-deps. It's supposed to execute any transform before parsing the file, as explained [here](https://github.com/substack/module-deps#transforms). 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.\r\n\r\nI 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."},"comment":{"url":"https://api.github.com/repos/andreypopp/reactify/issues/comments/75424461","html_url":"https://github.com/andreypopp/reactify/issues/20#issuecomment-75424461","issue_url":"https://api.github.com/repos/andreypopp/reactify/issues/20","id":75424461,"user":{"login":"graue","id":1730853,"avatar_url":"https://avatars.githubusercontent.com/u/1730853?v=3","gravatar_id":"","url":"https://api.github.com/users/graue","html_url":"https://github.com/graue","followers_url":"https://api.github.com/users/graue/followers","following_url":"https://api.github.com/users/graue/following{/other_user}","gists_url":"https://api.github.com/users/graue/gists{/gist_id}","starred_url":"https://api.github.com/users/graue/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/graue/subscriptions","organizations_url":"https://api.github.com/users/graue/orgs","repos_url":"https://api.github.com/users/graue/repos","events_url":"https://api.github.com/users/graue/events{/privacy}","received_events_url":"https://api.github.com/users/graue/received_events","type":"User","site_admin":false},"created_at":"2015-02-22T07:53:10Z","updated_at":"2015-02-22T07:53:10Z","body":"Thank you, Andrey. I was thinking in a perfect world, react-menu wouldn't have to cater to Browserify (maybe they build their own apps using Webpack or something else). But that may be too idealistic of me. I sent them a PR instead, as you suggested."}}