Error parsing Es6 jsx to js React

Question

I trying to work with react. I have the next code :

index.js

var Btn = require('./components/Btn.jsx');



    var app = {
        // Application Constructor
        initialize: function() {
            console.log("here with me");
            ReactDOM.render(<Btn>, document.getElementbyId('app'))
        },

        onDeviceReady: function() {
            this.receivedEvent('deviceready');
        },
    };

    app.initialize();

I have the next node_modules instaled:

Babel
Babel-plugin-transform-react-jsx
Babel-preset-env
Babel-cli
babel-preset-env
babel-preset-es2017
babel-preset-react

Mi .babelrc

{ "presets": ["env"] }

When I run the comand for whath and compile the jsx to js I have the next

$ babel --presets env js/src --watch --out-dir js/dist    
SyntaxError: js/src/index.js: Unexpected token (10:24)
       8 |     initialize: function() {
       9 |         console.log("here with me");
    > 10 |         ReactDOM.render(<Btn/>, document.getElementbyId('app'))
         |                         ^
      11 |     },
      12 |
      13 |     onDeviceReady: function() {

I really find about this and try a lot of things but i don't undestand what happen, in each tutorial that i see the sintax is correct and all works good. I hope that this can be something stupid and I can't found it. Can Anyone explain to me What can i do? or how.

I think it has to do with transpiling react element. Add "transform-react-jsx" plugin to your .babelrc file — Ademola Adegbuyi
– Ademola Adegbuyi, Commented Jan 6, 2017 at 15:00

oobgam · Accepted Answer · 2017-01-09 07:47:56Z

1

Since you have babel-preset-react, try adding this to your .babelrc {"presets": ["react", "es2017"], } check this link for the format .babelrc

edited Jan 9, 2017 at 7:47

answered Jan 6, 2017 at 15:08

oobgam

1,3098 silver badges10 bronze badges

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

3 Comments

jircdeveloper Over a year ago

Thanks for answer. yap! this was an error, but it's not the error from the console, i fix that and the console still showing the same "unexpect token"

oobgam Over a year ago

since you have babel-preset-react, try adding this to your .babelrc {"presets": ["react", "es2017"], } check this link for the format babeljs.io/docs/usage/babelrc

jircdeveloper Over a year ago

Your comment was the asnwer for my problem. very thanks. How can I mark this comment as my asnwer ?

Collectives™ on Stack Overflow

Error parsing Es6 jsx to js React

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