JSX Converter using React.createElement("h1", null) instead of React.DOM.h1(null)

Question

JSX Transformer Causes Errors

When I convert my react files using the converter from react-tools

      $ jsx public/dev/jsx public/prod/js --no-cache-dir

Or when I convert with grunt-react

      $ grunt react

My production file breaks because the conversion uses React.createElement and the error says that this function is undefined.

      <h1>{this.state.title}</h1>

converts to:

      React.createElement("div", null, 
      React.createElement("h1", null, this.state.title)

instead of:

      React.DOM.h1(null, this.state.title)

The live converter works fine because it uses React.DOM.h1(null, this.state.title). This line of code works well with react, but the React.createElement() function does not work and is not found.

How can I force my auto converter, either JSX or grunt, to convert to React.DOM.h1(null) instead of React.createElement(h1, null). Why does the converter use this function?

Answer 1

I had the same error with the coffee-react-transform lib. These libraries are getting updated for React 0.12. If you're still on React 0.11, you'll probably need to roll back grunt-react to a slightly older version, or bump up to React 0.12.