BABEL parse error: transpiling react js into js

Question

I'm trying to transpile my react jsx code into js using babel. This is the command I used:

npx babel BlueSlide/js/student_slider.jsx --watch --out-file BlueSlide/static/js/student_slider_compiled.js

When I do this I get this error

  49 |   render() {
  50 |     return (
> 51 |       <div class="jumbotron thinking">
     |       ^
  52 |         <h1>Welcome To Blue Slide</h1>
  53 |         <p>How well do you understand what's going on</p>
  54 |         <div class="slidecontainer">
    at Parser.raise (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:6344:17)
    at Parser.unexpected (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:7659:16)
    at Parser.parseExprAtom (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:8828:20)
    at Parser.parseExprSubscripts (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:8413:23)
    at Parser.parseMaybeUnary (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:8393:21)
    at Parser.parseExprOps (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:8280:23)
    at Parser.parseMaybeConditional (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:8253:23)
    at Parser.parseMaybeAssign (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:8200:21)
    at Parser.parseParenAndDistinguishExpression (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:8963:28)
    at Parser.parseExprAtom (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:8760:21) {
  pos: 1356,
  loc: Position { line: 51, column: 6 },
  code: 'BABEL_PARSE_ERROR'
}

I tried replacing the inside of the render function with just a simple div and the same problem. I don't know why it's yelling at me for my render return statement.

I just want the react code to be compiled so that I can use it with my HTML and if this isn't the right way to do it, feel free to suggest an alternative.

Yilmaz · Accepted Answer · 2019-07-15 14:50:49Z

first install babel-cli

npm i babel-cli -g //install globally so u can use anywhere

Babel is a compiler but it is not going to compile anything by default. We have to add plugins and pre-sets in order to get any sort of change in our code. you have to install

 npm i babel-preset-env babel-preset-react --save-dev

now you need to create two directories. public and src. in public folder place index.js and index.html.

index.html

<body>
    <div id="here"></div>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="./index.js"></script> //index.js

index.js should be empty. we will write our jsx code in src directory, babel will transpile it onto index.js

now in src folder create app.js and run this code for testing

src/app.js

const template = <p>this is jsx</p>;
const appRoot = document.getElementById("here");
ReactDOM.render(template2, appRoot);

now in command line run this code:

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

if you check the public/index.js

"use strict";

var template = React.createElement(
  "p",
  null,
  "this is jsx"
);
var appRoot = document.getElementById("here");
ReactDOM.render(template2, appRoot);

david · Accepted Answer · 2019-06-11 01:41:38Z

0

You haven't posted your babel.rc file, but I suspect you haven't installed @babel/preset-react and added it to your config. This is needed to transpile the JSX syntax.

answered Jun 11, 2019 at 1:41

david

18.3k4 gold badges45 silver badges60 bronze badges

2 Comments

Joshua Segal Over a year ago

yup. I don't really know what those. So I need to make a babel.rc in the root of the project? then install babel/preset-react and add it to config. anything else?

david Over a year ago

@JoshuaSegal This page should have enough instructions to get you going: babeljs.io/docs/en/babel-preset-react

EGurelli · Accepted Answer · 2019-10-27 00:21:23Z

0

@babel/preset-react

should be installed. And while compiling jsx -> js code:

--presets @babel/react

arguments should be supplied. So your compile code will look to similar like this:

npx babel BlueSlide/js/student_slider.jsx --presets @babel/react --watch --out-file BlueSlide/static/js/student_slider_compiled.js

answered Oct 27, 2019 at 0:21

EGurelli

4165 silver badges6 bronze badges

Collectives™ on Stack Overflow

BABEL parse error: transpiling react js into js

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related