Is there any way of using JSX in a native CommonJS environment?

Question

I'm starting a new project on an environment that has native CommonJS support for require modules - it's an atom-shell project, there is no possibility of using pre-compiling steps such as in Browserify or webpack AFAIK.

I'm able to use JSX on my app.jsx entry-point file that is declared on my index.html, that's because JSXTransformer was declared previously:

<script src="scripts/vendor/JSXTransformer.js"></script>
<script type="text/jsx" src="scripts/app.jsx"></script>

I want to be able to use the JSX syntax for the sub modules that are imported as CommonJS modules inside my app.jsx module:

// This raises an Error, the XML-like tags are not supported
var Grid = require('./scripts/grid.jsx');

As far as I understand, I would be forced to drop the JSX syntax and go with the vanilla syntax for any module that is loaded via require. Are there any alternatives to still using JSX in this situation?

Answer 1

[Update]

Now that the JSX transformer is being deprecated in favor of Babel, you can use Babel's require hook to support JSX in CommonJS-like environments:

Usage

require("babel/register");

All subsequent files required by node with the extensions .es6, .es, .jsx and .js will be transformed by Babel. The polyfill is also automatically required.

NOTE: By default all requires to node_modules will be ignored. You can override this by passing an ignore regex via:

require("babel/register")({
  // This will override `node_modules` ignoring - you can alternatively pass
  // an array of strings to be explicitly matched or a regex / glob
  ignore: false
});

[Old Answer]

If it's a Node.js environment (like atom-shell is) you can use node-jsx:

require('node-jsx').install()
require("./myComponent.js");

You can also use the .jsx extension if you want:

require('node-jsx').install({extension: '.jsx'})
require("./myComponent.jsx");

Answer 2

You can simply copy over the source directory:

cp -R src dist

And then use the jsx tool from react-tools

jsx -x jsx dist dist

And remove the jsx files

find dist -iname '*.jsx' | xargs rm

---

There are perhaps cleaner ways to do this, but this should be good enough for now.