React JSX + Titaniumifier

Question

Our current infrastructure relies on Titanium for native. I am trying to convert my node project into CommonJS using https://www.npmjs.com/package/grunt-titaniumifier . However, it fails on the JSX:

return (
  <div className="App">
    <EnergyChart width="1000" data={JSONData.data} customerID={customerID} lineColor='#FF0' height="500" marginTop="20" marginLeft="50" marginBottom="20" marginRight="20" />
  </div>
);

Browserify works fine, as it uses the transform like so:

browserify: {


  app: {
    src: 'app/App.js', dest: 'dist/bundle.js',
    options: {
        transform: ['grunt-less-browserify', require('grunt-react').browserify],
    }
  },

}

For titaniumifier, I have the following:

"titaniumifier": {
  "module": {
    files: {
      // The package is in "." and the zipfile will be written in "."
      ".": "."

    },

  },
  options: {
      transform: [ require('grunt-react').browserify],
  }
}

However running grunt titaniumifier:module returns

Fatal error: Parsing file /Users/rduckworth/Projects/titanium-d3/app/App.js: Unexpected token (23:6)

which is the JSX code above.

Is there anyway I can get Titaniumifier to compile the JSX like browserify does?

Answer 1

@rickyduck Creator and maintainer of titaniumifier here. I’m so sorry I missed this question.

You can enable Babel transpilation for you package/module by using the same syntax I show on the Wiki for enabling it for your app.

Long story short:

1. Add Babel as a dependency
2. Use the titaniumifier.transforms object of your package.json

An example:

{
  "devDependencies": { ".." },
  "titaniumifier": {
    "transforms": {
      "babel": { "presets": [ "es2015" ] }
    }
  }
}