RequireJS + Babel + JSX

Question

I'm trying to invoke in-browser JSX transformations using Babel.

I'm loading an AMD JS module in the browser using the following:

require(["nbextensions/ht"] function(ext){});

Which eventually imports this "ui" module, which has calls a function to render JSX. However, this doesn't seem to be triggering Babel's in-browser JSX transformer. Is it even possible to call Babel's JSX Transformer from within a RequireJS context?

var BOWER = '/nbextensions/ht/bower_components'
var COMPONENTS = '/nbextensions/ht/components'
var NODE_MODULES = '/nbextensions/ht/node_modules'

requirejs.config({
  paths: {
    es6: NODE_MODULES + "/requirejs-babel/es6",
    babel: NODE_MODULES + "/requirejs-babel/babel-5.8.22.min"
  }
})

define([
  BOWER + '/react/react.min.js',
  "es6!" + COMPONENTS + "/App.jsx"
],function(React, App){
  console.log("Loaded React v" + React.version)

  var ui = {}
  ui.render = function() {
    React.render(<App/>, document.getElementById("ht_main"))
  }

  return ui
})

Answer 1

Ah, figured it out. The method used here https://github.com/podio/requirejs-react-jsx does work, but the RequireJS JSX transformation only works on the imported module (main.js cannot have JSX mixed in).

Therefore, the Component module should simply be wrapped in a function prototype that exposes a render() method to React.render.

Refer to the example on the github page.