ReactJS syntax error: unexpected token '<'

Question

I was following a course on udemy on react components and I was met with this Syntax error.

I have the following dependencies installed using yarn: "dependencies": { "babel-preset-env": "1.5.2", "babel-preset-react": "6.24.1" }

Here's myJSX file:

class Header extends React.Component {
    render() {
        return <p>This is from header</p>;
    }
}

const jsx = (
    <div>
        <h1>Title</h1>
        <Header />
    </div>
);


ReactDOM.render(jsx, document.getElementById('app'));

I am using this command to convert this to the main JS file:

babel src/app.js --out-file=public/scripts/app.js --preset=env,react --watch

Please let me Know what I am doing wrong here

Error messages are made up of text, show us error messages, not pictures of them. — Quentin, Jun 08 '18 at 16:07
Don't you need to separately add JSX support? Your snippet works in JSFiddle when creating a React + JSX fiddle — Leite, Jun 08 '18 at 16:07
Theres no error in this code, see this https://codepen.io/FederalCircle/pen/aKBXor, this is probably something with babel — Alyson Maia, Jun 08 '18 at 16:08
@Ayankashyap have you tried updating your babel command yet ? — user3210641, Jun 08 '18 at 16:14

score 2 · Accepted Answer · answered Jun 08 '18 at 16:08

2

Not 100% that this helps, but as stated in babel docs you should use presets instead of preset

babel script.js --presets react

So your full babel command:

babel src/app.js --out-file public/scripts/app.js --presets env,react --watch

answered Jun 08 '18 at 16:08

user3210641

1,565
1
10
14

Glad it helped ! :) Don't forget to accept this answer for people who might come to this thread in the future. – user3210641 Jun 08 '18 at 16:17

ReactJS syntax error: unexpected token '<'

1 Answers1