If you're using Browserify and Reactify to write React components and build them for the browser, you may, depending on your setup, see errors along the lines of "unexpected token <", which means that your code is not getting Reactified properly. You will either see this in Gulp, because some subsequent step in the pipeline can't parse your code, or in the browser.
Here's how browserify decides how to apply transforms:
- Anything specified when you actually call browserify (i.e. in a gulpfile or on the command line) will be run first. Calls here can specify {global: true}, which will make them be applied to dependencies as well as code in the current module.
- If there is a browserify.transform key in package.json, it can list transforms which should be applied, in the order that they should be applied.
You need to specify reactify before anything else which is going to want to parse the code, because obvs. it isn't valid es5 until it's been reactified (so e.g. having ["browserify-shim", "reactify"] is an error because browserify-shim will try to parse your ESX code before reactify has a chance to fix it.) This is true of all high-level source transforms, like coffescript, purescript etc.
Transforms listed in package.json only affect the code in that actual package. Code brought in from node_modules will only be affected by transforms set up its own package.json.
So if you are writing a reusable React component, you must remember to put browserify: { transform: ["reactify"] } in the package.json for it.
To get the benefit of reactify's ES6 features, you need to give it the es6 option. You can do this in package.json as follows:
browserify: {
transform: [
["reactify", {"es6": true}]
]
}
I have taken to specifying reactify in packagae.json always, and not mentioning it in the actual gulpfile. Conversely, where I choose to shim out jQuery I want that to happen to all code brought in from everywhere, so I've put that in the gulpfile and added {global: true} to its options.