CODEWITHSUNDEEP
javascriptreactjs
Marta Ciesielska
Marta Ciesielska

Reputation: 69

JSX compiler output is not valid JavaScript

I'm playing with React and I've run into a problem with the offline JSX compiler.

Here's my JSX code in a file named helloworld.js, placed in a folder named src within the root directory of my project:

/** @jsx React.DOM */

var Hello = React.createClass({
    render: function () {
        return <div>
                <h3>Hello, {this.props.name}</h3>
            </div>
    }
});

React.renderComponent(
    <Hello name={"Jane Doe"} />,
    document.getElementById('example')
);

In the command line, when I navigate to the root directory of my project and I run this:

jsx /src /build

The output file helloworld.js is produced in the build folder but it does not contain valid JavaScript.

Here's how the content looks like:

/** @jsx React.DOM */

var Hello = React.createClass({displayName: "Hello",
    render: function () {
        return <div>
                <h3>Hello, {this.props.name}</h3>
            </div>
    }
});

React.renderComponent(
    <Hello name={"Jane Doe"} />,
    document.getElementById('example')
);

As you can see, it still contains the inline HTML instead of valid JavaScript. There is no indication of an error in the command line. It looks like this:

built Module("helloworld")
["helloworld"]

Does anyone have an idea why that might be happening?

Upvotes: 6

Views: 773

Answers (3)

user5692355
user5692355

Reputation:

From the docs i've seen that the default output stream for jsx is stdout, which means it should output the file into the console. Either try to use the --output option or redirect the command into a file:

jsx ./src/helloworld.jsx --output ./build/helloworld.js

or

jsx ./src/helloworld.jsx > ./build/helloworld.js

I myself couldn't run your code with jsx (It said my syntax isn't good?), maybe try to use babel-cli instead: How to convert react JSX files to simple JavaScript file [offline transformation]

Upvotes: 0

jedt
jedt

Reputation: 1691

I'm not sure if this will help but i've written a jsx to javascript compiler using gulp using browserify and reactify it runs on the background

https://github.com/jedt/basic-react-boilerplate

(PS. I've tested your jsx and it works for me.)

Upvotes: 0

deowk
deowk

Reputation: 4318

Maybe try to wrap your html in brackets.

var Hello = React.createClass({displayName: "Hello",
    render: function () {
        return (
            <div>
                <h3>Hello, {this.props.name}</h3>
            </div>
        );
    }
});

Upvotes: 1

Related Questions