ReactJS - Babel usage problems to compile .jsx

Question

For a quick test, i've created my main.jsx file written in ES6 for my ReacJS app:

main.jsx

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Link } from 'react-router'

class TestComponent extends React.Component {

    render() {
        return <div className="test">...</div>;
    }

}

Then i compile my code with browserify and babel:

browserify -t babel main.jsx -o public/js/bundle.js

I get this error: Error: Cannot find module 'babel'

What's the cleanest way to compile ES6 code with ReactJS?

sma · Accepted Answer · 2015-11-03 15:27:54Z

1

If you are using Browserify, you can use the transform 'babelify' to compile your ES6 code. Check it out here:

https://github.com/babel/babelify

edited Nov 3, 2015 at 15:27

answered Nov 3, 2015 at 15:14

sma

9,5978 gold badges53 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Luca Mormile Over a year ago

I've installed babelify, i've launched browserify main.jsx -o public/js/bundle.js -t [ babelify --presets [ es2015 react ] ] but i get this error: Couldn't find preset "es2015" while parsing file

J. Mark Stevens Over a year ago

npm install babel-preset-es2015

Luca Mormile Over a year ago

Ok, babel-preset-es2015 and babel-preset-react was missing, thank you all

Collectives™ on Stack Overflow

ReactJS - Babel usage problems to compile .jsx

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related